问题标签 [word-break]

我正在寻找最佳解决方案，以便在必要时允许文本在单词中间换行。最好，我的意思是大多数浏览器兼容，并且会在单词中断之前支持单词中断。

如果标记看起来比我的更好（请参阅我的答案），这也会有所帮助。

编辑：

请注意，这专门针对用户生成的内容。

编辑2：

该网站上大约 25% 的 Firefox 用户仍在使用 v3.0 或更低版本，因此支持他们至关重要。这是基于上个月的数据（约 121,000 次访问）。

<p>我在标签内的标签中只有一段普通的文本<div>。但只有 Firefox 才能正确显示。

Firefox 打破了单词之间的界限。所有其他浏览器都会中断中间字，这使得它难以阅读。

这是我的意思的一个例子：

火狐（工作）：

所有其他浏览器（IE5-8、safari、chrome）（不工作：）

我如何使它适用于所有浏览器？

我目前面临一个相当困难的问题；非常感谢您的帮助。

我有一个包含 2 列 td1 和 td2 的表格，其中包含文本，并且两者都有固定的宽度。

td1.width = 10px 和 td2.width = 20px

固定宽度是在运行时使用 JQuery 从左边一个一个地设置的（因为这个表嵌套在另一个表中......）

文本宽度可能比这些固定宽度长，在这种情况下，预期的行为是

列的固定宽度应该保持不变1）如果有额外的文本，文本应该换行，它不应该增加或减少 td 宽度 2）如果有空格，调整其他大小时不应减小单元格宽度栏目或页面；它应该保持完整。

我已将 td.whitespace 属性设置为 pre-wrap 和 td.word-wrap: break-word 但它们没有帮助。

使用 css 2.0（不是 3.0）如何实现这些？

谢谢，

示例 html：

我有一个顶部导航菜单，其中包含一个 LI 向左浮动的 UL。

每个 LI 都有一个 CSS 样式 {border-right 1px solid} 作为每个菜单选项之间的分隔符，我使用 CSS 选择器 last-of-type 来删除最后一个 LI 的右边框。

这一切看起来都很棒，直到重新调整浏览器窗口的大小并将一些 LI 下拉到第二行。last-child 样式规则仍按要求适用，但此时我还想在最后一个 LI 中删除右边界，然后再将其折叠到第二行。

在自动换行/换行之前是否有 jQuery 或通用 Javascript 方法来检测一行上的最后一个元素？

标签中的文字<p>太长时会出现这样的情况，如何用CSS防止这种情况？我已经尝试过 CSS 属性word-break: break-all;，但 Firefox 和 Opera 不支持此属性，除此之外，其他“正常”字词也会中断。所以我只想打破很长的单词，而不是短的单词，这取决于 white 的宽度<div>。

您可以查看更多信息：http: //jsfiddle.net/Le4zK/16/

我正在尝试确定是否可以为支持的元素创建 css word-wrap:break-word，但是当无法破坏时，它也会扩展以获取其子元素的宽度。

在上面的示例中，url 正常中断，但是如果窗口变得比表格更窄，表格和 img 会溢出红色的外部 div。

如果我将外部 div 设为 display:inline-block 或 display:table，红色外部 div 会正确扩展以包含内容，但如果窗口比 url 窄，则 url 不会中断。

我只需要它在WebKit（在Android上）中工作，如果可能的话，我正在尝试找到一个仅CSS（无Javascript）的解决方案。

我正在一个 Wordpress 框架中进行试验，试图让博客文章标题出现在一个大方块中，如果需要保持形状，换行符会出现在单词中间。

使用word-wrap和（显然）word-breakCSS 属性，我得到了我想要的外观......在 Safari/Chrome 中。Firefox 7 拒绝将单词分开。IE 的表现略好于 FF，但它的换行符似乎更加随意（此外，此时 IE 并不是真正的优先事项）。主要是我想弄清楚为什么word-wrap和/或word-break不会在FF的这种情况下工作。

• 我不使用表格。
• word-break似乎是这里的活动 CSS 属性。当我删除它并在 Safari/Chrome 中测试该页面时，这些行停止中断中间词。
• 我不认为任何自动应用的 Wordpress 类（henentry、格式标准等）都在起作用，但如果我错了，请纠正我。除了 jsfiddle 链接中显示的样式外，其他 CSS 是标准的 211 WP 主题。

一个活生生的例子：（简化但准确的 HTML/CSS）：http: //jsfiddle.net/3U4Xc/1/

任何输入表示赞赏。

我有以下代码

http://jsfiddle.net/yXwh9/3/ 结果是 http://jsfiddle.net/yXwh9/3/embedded/result/

问题是第一行被打破了，“Techconnect 是我们讨论的一个小组”出现在第一行和“技术、语言、平台、开发以及 IDE 和前端开发”。

在第二行，我不希望这种情况发生。我希望这条线在包含分区的右边界处完全分解。（我不想<pre>作为解决方案，只是因为文本可能不包含<br/>在里面。）

我有一个有两列的表。第一栏有一个很长的词。我想把长字包起来。

您可能已经注意到这与HTML table 中的 Word-wrap相同。该线程中选择的答案是添加“table-layout：fixed”，这意味着必须固定列宽。但是我需要表格保持灵活，以便第二列仅在第一列中的内容太长而无法容纳一行时为其内容使用足够的宽度。

下面的代码演示了这个问题。它在 IE/Chrome 中运行良好。但在 Firefox 中，该行没有换行。

有没有人有任何想法可以在 FireFox 中解决这个问题？

更新：我刚刚在 9 天前发布的 FireFox 15 Beta 中对其进行了测试。Firefox 15 现在支持“断词”。但我可能仍需要对以前的版本进行解决，因为 15 可能需要一段时间才能发布并成为多数。

如果我只是穿上word-break: break-all一个元素，我经常会得到这样的结果：

大家好，我正在输入一条
太长的消息！

显然这会更好：

大家好，我输入的
信息太长，无法容纳！

但与此同时，如果有人写道：

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊！！！！！！

然后我希望它是：

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊！！！！！！

我似乎找不到真正做到这一点的方法。

请注意，元素的宽度不是固定的，可能会发生变化。