截断div中的文本[重复]答案

【问题标题】：Truncate the text in div [duplicate]截断div中的文本[重复]
【发布时间】：2018-01-10 18:51:33
【问题描述】：

我有几个盒子项目并使用 flex 来对齐它们。

每个盒子都有 flex-direction: vertical 属性。

但是，您可以看到蓝色的描述。我想让它们具有相同的高度，并且溢出部分应该显示省略号。

但是，一点运气都没有。文字在div.control > div里面

有什么想法吗？

   height: 50px !important;

    text-overflow: ellipsis;
    div.control{
      overflow: hidden;
      text-overflow: ellipsis;
      div{
        height: 50px;
        background: lightblue;
        overflow: hidden;
        text-overflow: ellipsis;

      }
    }

【问题讨论】：

jsfiddle 链接请。否则人们很难提供帮助
text-overflow 属性仅适用于水平溢出，不幸的是不适用于垂直溢出。您是否考虑过使用 javascript 方法来解决这个问题？

标签： css

【解决方案1】：

根据这个问题， using text-overflow:ellipsis; only when reaching 3 lines in a div y 溢出中的省略号不能在直接 CSS 中完成。但是，您可以使用 max-height 属性而不是仅使用 height 来固定所有它们的高度。

【讨论】：

【解决方案2】：

查看有关文本溢出的文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

text-overflow 属性仅影响在块容器元素的内联前进方向上溢出的内容（例如，不影响在框底部溢出的文本）。

如果您希望显示多行文本，我认为您需要使用另一种方法来显示省略号。这是一个省略号出现在文本框外的想法：

https://jsfiddle.net/e0juLnvo/1/

.child {
    max-height: 50px;
    overflow: hidden;
}

.parent:after {
    content: '...';
}

由于我看不到您的代码，因此我无法评论您的弹性框未正确对齐的原因。对不起！

【讨论】：