CSS：你能防止overflow: hidden 切断最后一行文本吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3220812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Can you prevent overflow: hidden from cutting-off the last line of text?
提问by Get the Jaws of Life
When using CSS overflow: hidden , I've often found that the last line of text gets partially cut-off. Is there a way to prevent this so that any partial lines do not show-up. Almost like a vertical word-wrap.
使用 CSS overflow: hidden 时，我经常发现最后一行文本被部分截断。有没有办法防止这种情况发生，以便不显示任何部分行。几乎就像一个垂直自动换行。
回答by stalkerg
You can use wrapper div and multi-column css:
您可以使用包装 div 和多列 css：
.wrapper {
-webkit-column-width: 150px; //You can't use 100%
column-width: 150px;
height: 100%;
}
Solution example:http://jsfiddle.net/4Fpq2/9/
解决方案示例：http : //jsfiddle.net/4Fpq2/9/
Update 2017-09-21
更新 2017-09-21
In Firefox this solution still works but broken in Chrome. Recently Chrome started break column by small parts, also stop break content if you set height. In this http://jsfiddle.net/4Fpq2/446/example, I change hight to max-height and show strange Chrome behavior. If you have ideas please write in comments.
在 Firefox 中，此解决方案仍然有效，但在 Chrome 中已损坏。最近Chrome开始按小部分拆分列，如果您设置高度，也会停止拆分内容。在这个http://jsfiddle.net/4Fpq2/446/示例中，我将 hight 更改为 max-height 并显示奇怪的 Chrome 行为。如果您有想法，请写在评论中。
Update 2019-03-25
更新 2019-03-25
Basically, it's work even for Chrome but you should have at least two lines. For a block with some amount of visible text this approach still should work fine.
基本上，它甚至适用于 Chrome，但您应该至少有两行。对于具有一定数量可见文本的块，这种方法仍然可以正常工作。
回答by StR
Once you understand how the column-widthwork, @stalkerg's answer makes a lot of sense.
一旦您了解了column-width工作原理，@stalkerg 的回答就很有意义。
The column-widthsplits the content in columns, so the last line of the text would not fit, it will be moved to the next column. Now the trick is to make the column-width as wide as the container. The container has overflow: hidden, so the 2nd column won'tshow.
该列的宽度分割列的内容，使文本的最后一行不适合，它会被移动到下一列。现在的诀窍是使列宽与容器一样宽。容器已溢出：隐藏，因此不会显示第二列。
.box {
width: 200px;
}
.container {
-webkit-column-width: 200vw;
-moz-column-width: 200vw;
column-width: 200vw;
height: 100%;
}
回答by seon
This solution worked for me: https://stackoverflow.com/a/17413577/2540428Essentially create a wrapper div with the appropriate padding and put the content in the main div where you edit its height and hide the overflow. See link for more details.
这个解决方案对我有用：https: //stackoverflow.com/a/17413577/2540428基本上创建一个具有适当填充的包装 div 并将内容放在主 div 中，您可以在其中编辑其高度并隐藏溢出。有关更多详细信息，请参阅链接。
回答by Klaudia Brysiewicz
that worked for me:
这对我有用：
.wrapper_container{
width: 300px;
height: 200px;
overflow: hidden;
}
.wrapper{
-webkit-column-width: 300px;
column-width: 300px;
height: 100%;
}
回答by Get the Jaws of Life
Robis correct. I was making a div that had a max-height of 11em and the last line of overflow text was only half there. white-space: nowrap just eliminates that last line all together.
罗布是对的。我正在制作一个最大高度为 11em 的 div，溢出文本的最后一行只有一半。空白： nowrap 只是将最后一行一起消除。
I tried
我试过
white-space: nowrap;
and Gabyis also correct that this causes problems too.
和盖比也是正确的，这会导致问题太多。
The best I came up with was to fiddle with the line-height and div height until the fewest lines were cut-off
我想出的最好的办法是摆弄行高和 div 高度，直到最少的行被切断
回答by Ahmad Sharif
There are two css3 property exist. 1) word-break & 2) word-arap
存在两个 css3 属性。1) word-break & 2) word-arap
Don't forget these are new property that is css3. So that older browsers do not support such property.
不要忘记这些是 css3 的新属性。所以旧的浏览器不支持这样的属性。
.class-name {word-break: break-all;}
.class-name {word-wrap: break-word;}
回答by gouraw
just use the border instead of padding.
只需使用边框而不是填充。
回答by Nauman Sharif
just add column-width attribute and set width of the container, it will work.
只需添加 column-width 属性并设置容器的宽度，它就会起作用。
