Html 带多行文字省略号的Flexbox

我一直在使用空白：无换行、文本溢出：省略号和溢出：隐藏CSS属性为多行文本创建省略号截断。但是，在使用flexbox时，这不起作用

使用flex时，文本溢出：省略号似乎总是将flex项的高度截断为一行

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

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

我要截断的长多行文本

---

我可以用单行截断来工作。结合flex+空格手动设置高度：nowrap不起作用。

您可以使用此代码对省略号进行多行截断

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

您可以在此div中使用文本，并使用class。text block div实现省略号效果

---

注意：省略号效果需要webkit，这意味着如果有人使用不支持webkit的浏览器查看它，那么他们将看不到。。。但文本仍将在正确的位置被截断，因此此效果仍适用于所有主要浏览器。

可能重复：该线程中的任何问题/答案看起来都不是特定于flex+多行css ellipsisb的，因为此问题可能与flexbox无关。这可能是您实现省略号的方式。多行文字的省略号尤其棘手。我同意这很棘手。我应该把问题说得更清楚，“是否可以对多行文本使用flex和css省略号截断的组合？”我知道我可以在没有flex+省略号的情况下完成这项工作：）无论如何，请记住，要使

文本溢出：省略号

起作用，必须指定

空白：nowrap

。这实际上使多行文本上的省略号在

文本溢出时不可能出现。这就是为什么我让你去上面的帖子。它提供了多行文本中省略号的其他方法。