自动换行.

Question

如何显示带有自动换行符的长字符串，网站地址，单词或符号集，以保持div宽度？我猜是一个自动换行。通常添加空格是可行的，但是是否有CSS解决方案，例如自动换行？例如，它（非常讨厌）与div重叠，强制水平滚动等。我可以在上面的字符串中添加什么以使其完全适合div中的几行或浏览器窗口？

Answer 1

在此之前已经问过这个问题：

谁解决了我的div-break-breaks-my-div问题？（提示：不是stackoverflow）

CSS / JS中的自动换行

CSS：如何强制将长字符串（没有任何空格）包裹在XUL和/或HTML中

带有长网址的CSS溢出

长话短说：

就CSS解决方案而言，您必须：overflow: scroll;强制元素显示滚动条，并overflow:hidden;仅剪切掉任何多余的文本。有text-overflow:ellipsis;和word-wrap: break-word;但它们仅是IE（break-word但是，在CSS3草案中，因此从现在起这将是这5年的解决方案）。

底线是，如果将文字换行到下一行来阻止这种情况的发生对您来说非常重要，则唯一合理的解决方案是注入 &shy;（软连字符），<wbr>（断字标记）或&#8203;（零宽度空格，与&shy;减号（连字符）相同）。但是，如果您不介意Javascript，则可以使用连字符。

Answer 2

word-wrap: break-word;可在IE7 +，FF 3.5和启用Webkit的浏览器（Safari / Chrome等）中使用。要处理IE6，您还需要声明word-wrap: break-all;

如果浏览器列表中没有FF 2.0，则使用这些解决方案是可行的。不幸的是，它没有在单词断行的前面加上连字符，这是印刷的噩梦。我建议使用Paolo所建议的Hyphenator，这是不引人注目的JavaScript。因此，未启用JavaScript的用户的后备状态将是断字，不带连字符。我暂时可以忍受。在CMS中，Web设计人员无法控制要输入的内容，或者在哪里可以实现换行符和软连字符的地方，很可能会出现此问题。

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

Answer 3

刚才在这里提到过，但可能与这个问题更相关。最好的属性很快就会被溢出包装。如果实现，那么最好的价值是：

* {

   overflow-wrap:hyphenate. 

}

在iPhone或Firefox上书写时，似乎还没有得到任何支持，而且溢出包装：连字符甚至不在工作草案中。

在此期间，我将使用：

p {

    word-wrap: break-word;

    -moz-hyphens:auto; 

    -webkit-hyphens:auto; 

    -o-hyphens:auto; 

    hyphens:auto; 

}