CSS 阻止文本溢出答案

【问题标题】：CSS stop text overflowingCSS 阻止文本溢出
【发布时间】：2010-11-29 17:22:49
【问题描述】：

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

有没有办法让 CSS 中的文本“截断”？任何不适合的文本都会被删除。

【问题讨论】：

标签： css text overflow

【解决方案1】：

使用overflow: hidden

【讨论】：

【解决方案2】：

你试过overflow: hidden;吗？

【讨论】：

【解决方案3】：

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

更多信息：
W3C text-overflow specs（仍是工作草案）
Browser support for text-overflow
追踪Firefox support for text-overflow的状态

【讨论】：

【解决方案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: 也用首选尺寸设置宽度

【讨论】：

【解决方案5】：

如果您想剪掉多余的内容，可以使用 overflow : hidden; 但是您希望额外的内容应该出现在新行中，您可以使用 word-wrap : break-word; 如果您希望隐藏但不剪掉多余的内容，并且可以使用滚动条读取该内容，请使用 overflow : auto;

【讨论】：