自动换行

如何显示带有自动换行符的长字符串，网站地址，单词或符号集，以保持div宽度？我猜是一个自动换行。通常添加空格是可行的，但是是否有CSS解决方案，例如自动换行？

例如，它（非常讨厌）与div重叠，强制水平滚动等。wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

我可以在上面的字符串中添加些什么以使其完全适合div中的几行或浏览器窗口？

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

• 谁解决了我的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年的解决方案）。

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

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的专有代码，但是没有任何迹象。

word-break:break-all 工作请客

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

* {
   overflow-wrap:hyphenate. 
}

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

在此期间，我将使用：

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

显示：块；
溢出：隐藏；
文字溢出：省略号；
宽度：200像素；//或最适合您的东西

我使用代码来防止所有长字符串，URL等。

 -ms-word-break: break-all;

/* Be VERY careful with this, breaks normal words wh_erever */
     word-break: break-all;

/* Non standard for webkit */
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

希望有一天我们可以访问word-wrapCSS3中的属性：Force Wrapping：'word-wrap'属性。

有一天...

通常，Cells会自然地执行此操作，但是您可以使用以下命令在div上强制执行此操作：

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}

始终指定line-height属性-如果未指定，则可能导致word-break: break-all;属性失败。

看来这对于最新的Chrome来说是成功的诀窍：

[the element],
[the element] * {
  word-wrap: break-word;
  white-space: pre;
}

除了Chrome，我没有检查任何浏览器。