html - 带有截断多行文本的 CSS Transition

Question

我有以下代码 snippet :

如您所见，有一个截断的多行文本，如果单击它会展开。我还为 max-height 添加了一个过渡以实现平滑移动。

input[type='checkbox'] {
  display: none;
}

.flexbox {
  display: flex;
  flex-flow: row wrap;
  background-color: green;
}

.lbl-toggle {
  max-height: 30px;
  transition: max-height 1s ease-in-out;
}

.truncate {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.toggle:checked+.lbl-toggle {
  max-height: 350px;
}

.toggle:checked+.lbl-toggle>span {
  text-overflow: initial;
  overflow: initial;
  white-space: initial;
}

<div>
  <input id="collapsible" class="toggle" type="checkbox">
  <label for="collapsible" class="flexbox lbl-toggle">
    <span class="truncate">Text here is very very long that it might get truncate if this box get resized too small. Text here is very very long that it might get truncate if this box get resized too small</span>
  </label>
</div>

但是，whitespace-property 在与 max-height 和过渡的交互中产生了问题。只有初始过渡有效，之后就不再有效了。我想如果我应用然后截断和 white-space: nowrap 设置我的 max-height 不再应用并且转换中断。

我唯一的想法是，我需要在 JS 应用空白属性时延迟。但是，我不想使用 JS。还有其他解决方案吗？

Answer 1

遗憾的是，max-height 进/出转换的不一致是 CSS 中的一个众所周知的问题 - this article很好地解释了这个问题，并提供了一些可能有用的替代方案。