带有多行文本省略号的 Flexbox

Question

我一直在使用white-space: no-wrap、text-overflow: ellipsis和overflow: hide 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 结合手动设置高度不起作用。

Answer 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的浏览器查看它，他们将看不到...但文本仍然会在正确的位置被截断，所以这个效果仍然有效所有主要浏览器。