我有一个关于white-space属性的问题,事实上,在我移开指针时我的过渡出现了错误。您可以在Codepen或下面的代码片段中看到。
.changement {
margin-top:2px;
color:white;
font-size:1em;
font-family: "Century Gothic";
overflow: hidden;
width:16em;
}
.changement .entete {
overflow: hidden;
border-radius: 9px;
text-align:center;
line-height:1.85em;
cursor:pointer;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-transition: all .7s ease .1s, max-height .7s ease 0s, white-space .1s ease 1s;
padding-left:.625em;
padding-right:.625em;
max-height:1.85em;
}
.entete:hover {
white-space: normal;
max-height:8em;
}
.technique .texte {
background-color: #5698C4;
}
.technique .entete {
background-color: #38627F;
}
<div class="changement technique" id="C14789120">
<div class="entete"> TITRE BEAUCOUP VRAIMENT BEAUCOUP TROP LONG MAIS ALORS VRAIMENT TROP LONG !!! </div>
</div>
只需移除空格,就能看到过渡效果有效了。您有什么提示来修复它吗?提前谢谢!
white-space:nowrap
到white-space:normal
,因此当您离开鼠标时,转换不起作用。您可以使用jQuery来解决这个问题。 - Mihai T