Question

我有一个元素，我希望我的文本行永远不会破坏，即使文本到达边界也是如此。在那种情况下，我只是希望文本溢出，就好像它只是一个长字。

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

我可以使用替代方法。

Answer 1

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

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

作为对未来I advise against using w3schools的建议，因为他们的数据往往是不完整的，有时甚至是错误的。 MDN是一个更可靠的替代方案！

Answer 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>

Answer 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/

CSS2替代text-wrap：none

3 个答案: