CSS 如何防止文本溢出

Question

我正在编写一个动态应用程序，遇到的一个问题是我有一些文本包含在一个div中，当div的大小太小无法容纳文本时，浏览器会表现得很奇怪。

有没有办法在CSS中使文本“截断”？任何无法适应的文本都将被删除。

- Tom Gullen

Answer 1

使用 overflow: hidden

- casablanca

Answer 2

你尝试过使用overflow: hidden;吗？

- wajiw

Answer 3

很遗憾，对于这个问题没有完全基于CSS的解决方案（在部分渲染文本不可见的情况下）。最接近的方法是使用CSS3属性text-overflow: ellipsis，它将截断字符串并在末尾添加“...”。这种技术最大的缺点是Firefox目前不支持它，并且看起来在不久的将来也不会支持。然而，有一种替代方案，可以在Firefox上使用，虽然不够优雅。

更多信息：
W3C text-overflow规范（仍然是工作草案）
text-overflow的浏览器支持
跟踪Firefox对text-overflow的支持状态

- keirog

Answer 4

 /*ellipsis stuff*/
    white-space: nowrap;
    overflow: hidden;
    text-transform: none;
    text-overflow: ellipsis;  /* IE 6+, FF 7+, Op 11+, Saf 1.3+, Chr 1+*/
    -o-text-overflow: ellipsis;  /* for Opera 9 & 10 */
    -ms-text-overflow: ellipsis; /*IE 8*/

obs: 还要使用首选大小设置宽度

- Andrade

Answer 5

如果你想要将额外的内容裁剪掉，可以使用overflow: hidden;但是如果你希望额外的内容换行显示，可以使用word-wrap: break-word;如果你希望额外的内容隐藏但不裁剪，并且可以通过滚动条读取该内容，请使用overflow: auto;

- Chirag Tilwani