wordwrap一个很长的字符串

Question

如何显示长字符串,网站地址,字符或符号集以及自动换行符以保持div宽度？我猜各种各样的文字包装.通常添加一个空间有效,但有一个CSS解决方案,如自动换行？

例如,它(非常nastily)重叠的div,迫使水平滚动等wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

我可以添加到上面的字符串中以便在div中的几行内或浏览器窗口中整齐地放入它？

Answer 1

这个问题之前已经在这里提出过:

• 谁解决了长字破坏我的div问题？(提示:不是stackoverflow)
• css/js中的自动换行
• CSS:如何强制将长字符串(没有任何空白)强制包装在XUL和/或HTML中
• CSS溢出长URL

长话短说:

对于CSS解决方案,你有:overflow: scroll;强制元素显示滚动条,并overflow:hidden;切断任何额外的文本.有text-overflow:ellipsis;,word-wrap: break-word;但它们只是IE(break-word但是在CSS3草案中,所以它将是从现在开始的5年的解决方案).

底线是,如果你从包装的文字阻止这种情况发生是非常重要的转移到下一行的唯一合理的解决办法是注入 ­(软连字符), <wbr>(字打破标签),或​(零宽度的空间,与­字符串服务器端的减号相同的效果.但是,如果你不介意Javascript,那么连字符似乎非常可靠.

Answer 2

word-wrap: break-word;可用于IE7 +,FF 3.5和支持Webkit的浏览器(Safari/Chrome等).要处理IE6,您还需要声明word-wrap: break-all;

如果您的浏览器矩阵中没有FF 2.0,那么使用这些是可行的解决方案.不幸的是,它没有连接前一行,其中单词被打破,这是一个排版的噩梦.我建议使用Paolo建议的连字符,这是一种不引人注目的JavaScript.对于非JavaScript启用的用户,后备将是没有连字符的破碎词.我暂时还能忍受.此问题很可能出现在CMS中,其中Web设计人员无法控制将要输入的内容或可以实现换行符和软连字符的位置.

我已经看了W3规范,其中讨论了CSS3中的连字符.不幸的是,似乎有一些建议,但没有具体的.看来浏览器供应商还没有实现任何功能.我已经检查了Mozilla和Webkit的专有代码,但没有任何迹象.

Answer 3

word-break:break-all 是一种享受

Answer 4

刚刚在这里提到过这个,但可能与这个问题更相关.不久之后,最好的酒店将是溢流包装.如果实施的最佳价值是:

* {
   overflow-wrap:hyphenate. 
}

在写iphone或firefox的时候,似乎还没有任何方式支持Doesen,而溢出包装:连字符甚至不在工作草案中.

在此期间我会使用:

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}