时间戳

首页 > 解决方案 > 带有截断多行文本的 CSS 过渡

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

问题描述

我有以下代码片段：

如您所见，有一个截断的多行文本，如果单击它会展开。我还为 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>

但是，空白属性在与 max-height 和过渡的交互中产生了问题。只有最初的过渡有效，之后不再有效。我想如果我正在应用然后截断并white-space: nowrap设置我的 max-height 不再应用并且过渡中断。

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

标签： htmlcsswhitespacetransition

解决方案

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

推荐阅读