文本换行的 CSS2 替代方案：无答案

【问题标题】：CSS2 alternative to text-wrap: none文本换行的 CSS2 替代方案：无
【发布时间】：2013-04-11 18:50:04
【问题描述】：

我有一个元素，我希望我的文本行永不中断，即使文本达到边界也不中断。在这种情况下，我只是希望文本溢出，就像它只是一个长单词一样。

经过一些研究，我发现 CSS3 属性 text-wrap 可以做到这一点。但是任何现代浏览器都不支持它。 http://www.w3schools.com/cssref/css3_pr_text-wrap.asp

有没有我可以使用的替代方法。

【问题讨论】：

word-wrap 呢？
word-wrap 可能很有用。但它提供的唯一值是normal 和break-word。没有none

标签： css

【解决方案1】：

试试overflow 和white-space？他们有相当好的浏览器支持。

View them on JSFiddle

#overflow {
  white-space: nowrap;
  overflow: visible;
}

作为对未来的建议I advise against using w3schools，因为他们的数据通常不完整，有时甚至是错误的。 MDN 是更可靠的选择！

【讨论】：

抱歉，我打字太快了。我在考虑定期溢出（无论如何，在大多数浏览器中默认为可见）。

【解决方案2】：

将您的代码包装在<pre> 中，这意味着您的文本是预先格式化的，并且只有在您实际声明它时才会换行 DEMO http://jsfiddle.net/kevinPHPkevin/zcSFp/

<div>
    <pre><p>this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph </p></pre>
</div>

【讨论】：

请注意，大多数浏览器会默认为 pre 元素使用等宽字体。
不错的解决方案。但我更喜欢 jmeas 解决方案，因为它是纯 CSS，而且这绝对是样式问题
是的，pre 几乎只是添加了 white-space: pre;，这与 white-space: nowrap; 几乎相同，只是它保留了换行符。
我同意朱尔斯的观点。从语义上讲，使用<pre> 可能不太合适，因为它专门用于“预格式化”文本，而不仅仅是应该保留在一行的文本。将样式与数据分开！

【解决方案3】：

这只是 CSS 规范中非常非常奇怪的事情之一。与您正在寻找的最近的属性是word-wrap。不幸的是，它没有不包装的价值，但white-space 有。尝试将其添加到您的元素中：

selector {
    white-space:nowrap; /* Sets no wrapping */
overflow:hidden; /* Hides the text that overflows the container. */
}

例如，您还可以使用 jmeas 的解决方案添加省略号。来源：http://css-tricks.com/almanac/properties/w/whitespace/

【讨论】：