带有多行文本省略号的 Flexbox

Posted 2023-03-15

【中文标题】带有多行文本省略号的 Flexbox

【英文标题】：Flexbox with multiline text ellipsis

【发布时间】：2016-12-22 05:30:28

【问题描述】：

我一直在使用 white-space: no-wrap、text-overflow: ellipsis 和 overflow: hidden CSS 属性来为多行文本创建省略号截断。但是，这在使用 flexbox 时不起作用。

使用 flex 时，text-overflow: ellipsis 似乎总是将 flex-item 的高度截断为单行。

是否可以对多行​​文本使用 flex 和 css 省略号截断的某种组合？

<div className="flex-container">
  <div className="flex-item">
    <p>long multiline text that i would like to truncate</p>
  </div>
</div>

我可以让它与单行截断一起工作。结合 flex + white-space: nowrap 手动设置高度不起作用。

【问题讨论】：

可能重复：***.com/q/33058004/3597276

看起来该线程中的任何问题/答案都不是特定于 flex + 多行 css 省略号的

因为问题可能与flexbox无关。这可能是您实施省略号的方式。而且多行文本的省略号特别棘手。

我同意这很棘手。我应该更清楚地提出这个问题，“是否可以对多行​​文本使用 flex 和 css 省略号截断的某种组合？”我知道我可以不用 flex + ellipsis 来做到这一点:)

无论如何，请记住，要使text-overflow: ellipsis 起作用，您必须指定white-space: nowrap。实际上，这使得text-overflow 无法在多行文本上省略省略号。这就是为什么我把你推荐给上面的帖子。它为多行文本的省略提供了其他方法。

【参考方案1】：

您可以将此代码用于省略号的多行截断

.text-block-div 
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 43px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

您可以在此具有 .text-block-div 类的 div 中使用您的文本来实现省略号效果。

注意：省略号效果需要webkit，这意味着如果有人使用不支持webkit的浏览器查看它，那么他们将看不到...但是文本仍然会被截断正确的点，所以这个效果在所有主流浏览器上仍然有效。