当使用CSS overflow:hidden时,我经常发现最后一行文本被部分截断。有没有办法来防止这种情况发生,以免任何部分线条不显示。几乎就像一个垂直的单词包装。CSS:你可以防止溢出:隐藏切断最后一行文本?
回答
该解决方案为我工作:https://stackoverflow.com/a/17413577/2540428 本质上创建适当的填充包装DIV并把内容放在你编辑它的高度的主div中并隐藏溢出。请参阅链接了解更多详情。
您可以使用包装的div和多列CSS:
.wrapper {
-webkit-column-width: 150px; //You can't use 100%
column-width: 150px;
height: 100%;
}
解决方案例如:http://jsfiddle.net/4Fpq2/9/
更新2017年9月21日
在Firefox这个解决方案仍然有效但在Chrome中被破解。最近Chrome开始以小部分为单位突破专栏,如果您设置高度,也会停止破解内容。 在此http://jsfiddle.net/4Fpq2/446/示例中,我将高度更改为最大高度并显示奇怪的Chrome行为。 如果您有想法,请在评论中写下。
存在两个css3属性。 1)分词& 2)word-arap
不要忘记这些都是css3的新属性。所以旧版浏览器不支持这种属性。
.class-name {word-break: break-all;}
.class-name {word-wrap: break-word;}
[Not working](http://jsfiddle.net/8takLekq/)在IE,Chrome或Firefox中。 – 2015-01-21 13:22:54
一旦你了解column-width
工作,@ stalkerg的回答如何使一个很大的意义。
column-width将列中的内容分割,因此文本的最后一行不适合,它将移动到下一列。现在的诀窍是使列宽与容器一样宽。容器溢出:隐藏,所以第二列不会显示。
.box {
width: 200px;
}
.container {
-webkit-column-width: 200vw;
-moz-column-width: 200vw;
column-width: 200vw;
height: 100%;
}
只需添加column-width属性并设置容器的宽度,就可以工作。
为我工作:
.wrapper_container{
width: 300px;
height: 200px;
overflow: hidden;
}
.wrapper{
-webkit-column-width: 300px;
column-width: 300px;
height: 100%;
}
- 1. 溢出隐藏的文本被切断
- 2. 你可以隐藏CALayer的溢出吗?
- 3. 切断效果与溢出:隐藏
- 4. 防止溢出:隐藏裁剪图像
- 5. CSS - 隐藏溢出
- 6. CSS溢出:隐藏
- 7. 防止隐藏最后一个css动画
- 8. 从一个Bootstrap行溢出的文本隐藏在另一行的文本后
- 9. 不能隐藏HTML/CSS文本溢出:隐藏
- 10. 文本溢出CSS截断
- 11. 防止文本到换行符溢出
- 12. 防止可被点击的元素隐藏区域溢出
- 13. AmXYChart - 如何添加填充以防止隐藏溢出
- 14. CSS溢出:隐藏它,但保持文本可选
- 15. 如何防止CSS溢出?
- 16. 用CSS隐藏溢出
- 17. CSS溢出:隐藏错误
- 18. 溢出:隐藏在CSS
- 19. 隐藏的CSS溢出
- 20. CSS停止文本溢出
- 21. 如何隐藏WPF网格溢出(像CSS溢出:隐藏)
- 22. 更改CSS溢出隐藏行为
- 23. 我可以完全隐藏一半截断的文本行吗?
- 24. 是否可以隐藏溢出的文本,但不能溢出子绝对div?
- 25. 隐藏最后CSS
- 26. DIV内部的SPAN可以防止文本溢出:省略号
- 27. 防止标签栏切断WKWebView文本
- 28. CSS - 防止弹出隐藏在其他元素后面
- 29. GridView切断最后一行
- 30. 防止移动Safari上的水平滚动,溢出-x:隐藏中断站点
提供一个例子吗?也许在最后一个元素上混乱了线条高度。 – 2010-07-10 20:58:25
他意味着内容被剪切中间,所以上半部分的字符显示,但不是底部。AFAIK有没有解决这个问题,除了拧行高(这不会是一个跨浏览器解决方案) – Rob 2010-07-10 21:02:13
为什么你使用溢出?包含浮游物?还是你真的需要隐藏满溢的东西? – 2010-07-10 21:02:57