截断div中的文本

Question

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

每个方框都有flex-direction：垂直属性。

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

然而，根本没有运气。该文字位于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;

      }
    }

Answer 1

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

Answer 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: '...';
}

由于我无法看到您的代码，因此我无法评论您的柔性盒未正确对齐的原因。遗憾！