Question

我正在编写一个动态应用程序，我遇到的一个问题是我在div中包含了文本，当div的大小太小而无法包含文本时，浏览器会很有趣。

有没有在CSS中制作文本'cutoff'？任何不适合的文本都将被删除。

Answer 1

使用overflow: hidden

Answer 2

你试过overflow: hidden;吗？

Answer 3

不幸的是，没有一个完全的CSS解决方案来解决这个问题（没有看到部分呈现的文本）。最接近的是使用CSS3属性text-overflow: ellipsis，它将剪切字符串并在末尾添加“...”。这种技术的最大缺点是Firefox目前不支持它，并且在不久的将来它看起来也不会。但是，您可以暂时使用另一种不太优雅的solution for Firefox。

更多信息：
W3C text-overflow specs（仍然是工作草案）
Browser support for text-overflow
跟踪Firefox support for text-overflow

的状态

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：还使用首选大小设置宽度

CSS停止文本溢出

4 个答案: