如何防止长篇大论打破我的div？
自从TABLE-布局切换到DIV布局以来，一个常见问题仍然存在：
问题 ：你用动态文本填充你的DIV，不可避免地会有一个超长的单词延伸到div列的边缘，使你的网站显得不专业。
RETRO-WHINING ：这在表格布局中从未发生过。 表格单元格将总是很好地扩展到最长单词的宽度。
严重性 ：即使是最主要的网站，我也会看到这个问题，尤其是在德国网站上，甚至像“限速”这样常见的词语也很长（“Geschwindigkeitsbegrenzung”）。
有没有人有一个可行的解决方案呢？
软连字符
您可以通过插入软连字符（ ­ ）来告诉浏览器在何处分割长单词：
averyvery­longword
可能会呈现为
averyverylongword
要么
averyvery-
长字
一个很好的正则表达式可以确保你不会插入它们，除非必要：
/([^s-]{5})([^s-]{5})/ → $1­$2
浏览器和搜索引擎足够聪明，可以在搜索文本时忽略此字符，Chrome和Firefox（未测试其他字符）在将文本复制到剪贴板时忽略它。
<wbr>元素
另一个选择是注入<wbr> ，一个以前的IE-ism，它现在在HTML5中：
averyvery<wbr>longword
没有连字符时打破：
averyvery
长字
您可以使用零宽度空格字符实现同样的功能​ （或​ ）。
仅供参考，还有CSS hyphens: auto由最新的IE，Firefox和Safari支持（但目前不支持Chrome）：
div.breaking {
hyphens: auto;
}
但是，连字符是基于连字字典，并不能保证打破冗长的单词。 尽管如此，它可以使文字变得更漂亮。
怀旧的解决方案
对于布局来说<table>是不好的，但是在其他元素上display:table是很好的。 它会和老式桌子一样古怪（而且很有弹性）：
div.breaking {
display: table-cell;
}
overflow和white-space: pre-wrap下面的white-space: pre-wrap答案也很好。
两个修复：
overflow:scroll - 这确保您的内容可以看到设计的代价（滚动条很丑） overflow:hidden - 只是切断任何溢出。 这意味着人们无法阅读内容。 如果（在这个例子中）你想阻止它重叠填充，你可能需要在填充内创建另一个div来保存你的内容。
编辑：作为其他答案的状态，有各种截断单词的方法，是在客户端处理渲染宽度（从不试图做这个服务器端，因为它永远不会工作可靠，跨平台）通过JS和插入中断字符，或者使用非标准和/或非常不兼容的CSS标签（ word-wrap: break-word在Firefox中似乎不起作用）。
尽管如此，你仍然需要一个溢出描述符。 如果您的div包含另一个过宽的块类型的内容（图像，表格等），则需要溢出才能使其不会破坏布局/设计。
所以通过一切手段使用另一种方法（或它们的组合），但也请记住添加溢出，以便覆盖所有浏览器。
编辑2（以解决您的评论如下）：
开始使用CSS overflow属性并不完美，但它会阻止设计中断。 应用overflow:hidden首先overflow:hidden 。 请记住，填充可能不会中断，因此无论是嵌套div还是使用边框（无论哪个最适合您）。
这会隐藏溢出的内容，因此您可能会失去意义。 您可以使用滚动条（使用overflow:auto或overflow:scroll而不是overflow:hidden ），但根据div的尺寸和您的设计，这可能看起来并不美观。
为了解决这个问题，我们可以使用JS来回收东西并做某种形式的自动截断。 我已经为你写了一些伪代码的一半，但在中途变得非常复杂。 如果你需要尽可能展示，请给连字符看看（如下所述）。
请注意，这是以用户的CPU为代价的。 这可能会导致网页花费很长时间来加载和/或调整大小。
正如我们所知，这是一个复杂的问题，并且不支持浏览器之间的任何常见方式。 大多数浏览器根本不支持该功能。
在使用HTML电子邮件进行的一些工作中，用户内容正在被使用，但脚本不可用（甚至CSS也不被支持），下面的CSS包含在你的无间隔内容块中至少应该有所帮助：
.word-break {
/* The following styles prevent unbroken strings from breaking the layout */
width: 300px; /* set to whatever width you need */
overflow: auto;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
-moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}
对于基于Mozilla的浏览器，上述XBL文件包含：
<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml">
<!--
More information on XBL:
http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference
Example of implementing the CSS 'word-wrap' feature:
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
-->
<binding id="wordwrap" applyauthorstyles="false">
<implementation>
<constructor>
//<![CDATA[
var elem = this;
doWrap();
elem.addEventListener('overflow', doWrap, false);
function doWrap() {
var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
while (walker.nextNode()) {
var node = walker.currentNode;
node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
}
}
//]]>
</constructor>
</implementation>
</binding>
</bindings>
不幸的是，Opera 8+似乎并不喜欢上述任何解决方案，所以JavaScript将不得不成为这些浏览器（如Mozilla / Firefox）的解决方案。另一种跨浏览器解决方案（JavaScript），包括Opera的最新版本将使用Hedger Wang的脚本：http：//www.hedgerwow.com/360/dhtml/css-word-break.html
其他有用的链接/想法：
Incomherent Babble»博客存档»模拟Mozilla / Firefox的CSS文字换行
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
[OU]在Opera中没有自动换行，在IE中显示正常
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera-users/2004-November/024468.html