CSS:你能防止溢出:隐藏截断最后一行文字吗？

Question

当使用CSS overflow:hidden时,我经常发现最后一行文本被部分截断.有没有办法防止这种情况,以便任何部分线条不显示.几乎像一个垂直的自动换行.

Answer 1

您可以使用包装器div和多列css:

.wrapper {
    -webkit-column-width: 150px; //You can't use 100%
    column-width: 150px;
    height: 100%;
}

解决方案示例: http ://jsfiddle.net/4Fpq2/9/

更新2017-09-21

在Firefox中,这个解决方案仍然有效但在Chrome中已经破解 最近Chrome开始按小部件打破列,如果设置高度,也会停止打破内容.在这个http://jsfiddle.net/4Fpq2/446/示例中,我将hight更改为max-height并显示奇怪的Chrome行为.如果您有想法请写评论.

Answer 2

一旦你理解了column-width工作的方式,@ stalkerg的答案就很有意义了.

该列的宽度分割列的内容,使文本的最后一行不适合,它会被移动到下一列.现在的诀窍是使列宽与容器一样宽.容器有溢出:隐藏,因此第二列不会显示.

.box {
    width: 200px;
}
.container {
    -webkit-column-width: 200vw;
    -moz-column-width:    200vw;
    column-width:         200vw;
    height:               100%;
}

Answer 3

罗布是对的。我正在制作一个最大高度为 11em 的 div，最后一行溢出文本只有一半。空白：nowrap 只是将最后一行全部删除。

我试过

white-space: nowrap;

盖比也认为这也会引起问题，这是正确的。

我想出的最好办法是摆弄行高和 div 高度，直到最少的行被截断