使用white-space属性进行过渡的CSS转换

Question

使用white-space属性进行过渡的CSS转换

3

我有一个关于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>

只需移除空格，就能看到过渡效果有效了。您有什么提示来修复它吗？提前谢谢！

- Cameron M.

1

我看不出任何区别。 - er-han

1

过渡似乎对我来说没有调整任何东西就可以工作，问题到底是什么？ - sol

无法获取问题 :) - chirag solanki

1

问题在于您无法在非数字值上使用过渡，例如white-space：nowrap到white-space：normal，因此当您离开鼠标时，转换不起作用。您可以使用jQuery来解决这个问题。 - Mihai T

@er-han 当你“鼠标移出”时，过渡效果不起作用。 - Cameron M.

正如我在评论中所说的，你无法使用CSS来完成这个任务。请参考这里：https://dev59.com/gYDba4cB1Zd3GeqPHKgG - Mihai T

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Plasebo · Answer 1

将.changement .entete的text-align设置为left似乎会在悬停时创建平滑的动画。