使用空白属性CSS进行转换

Question

我遇到了white-space属性的问题，实际上，当我删除指针时，我的转换错误。 您可以在Codepen或下面的代码段中看到它。

Id
Priority
State
Title
Type

.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;
 }

只需删除空白区域，您就会看到转换有效。 你有一些提示来解决它吗？ 提前谢谢！

Answer 1

将.changement .entete左侧的text-align放在左侧，似乎可以创建一个平滑的动画。