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行为。如果您有想法请写评论。

更新2019-03-25

基本上，它甚至可以用于Chrome，但你应该至少有两行。对于具有一定量可见文本的块，这种方法仍然可以正常工作。

http://jsfiddle.net/ncmo9yge/

Answer 2

一旦你理解了column-width是如何工作的，@ stalkerg的答案就很有意义了。

column-width将内容拆分为列，因此文本的最后一行不适合，它将移动到下一列。现在的诀窍是使列宽与容器一样宽。容器有溢出：隐藏，因此第二列不会显示。

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

Answer 3

这个解决方案对我有用：https://stackoverflow.com/a/17413577/2540428基本上用适当的填充创建一个包装div，并将内容放在主div中，在那里编辑它的高度并隐藏溢出。请参阅链接了解更多详情。

Answer 4

这对我有用：

.wrapper_container{
    width: 300px;
    height: 200px;
    overflow: hidden;
}

.wrapper{
    -webkit-column-width: 300px;
    column-width: 300px;
    height: 100%;
}

Answer 5

Rob是正确的。我正在创建一个最大高度为11em的div，最后一行溢出文本只有一半。 white-space：nowrap只是消除了最后一行。

我试过了

white-space: nowrap;

和Gaby也是正确的，这也导致了问题。

我想出的最好的方法是摆弄线高和div高度，直到最少的线被切断

Answer 6

只需添加列宽属性并设置容器的宽度，它就可以工作。

Answer 7

只使用边框而不是填充。

Answer 8

存在两个css3属性。 1）word-break＆2）word-arap

不要忘记这些是css3的新属性。因此旧版浏览器不支持此类属性。

.class-name {word-break: break-all;}
.class-name {word-wrap: break-word;}