单词内断字

Question

我有这个HTML文件。

<div class="externalWidth">
    <div class="container">
        <div class="element">this_is_a_really_long_text_without_spaces</div>
        <div class="element noWrap">:-)</div>
    </div>
</div>

<div class="externalWidth">
    <div class="container">
        <div class="element ">this is a really long text without spaces</div>
        <div class="element noWrap">:-)</div>
    </div>
</div>

还有这个CSS

.externalWidth { width: 200px; }
.container { margin-bottom:10px; display:inline-table; height:40px; width:100%; }
.element { display:table-cell; }
.noWrap { white-space:nowrap; }

我已经制作了一个jsfiddle来加以说明。两个.element里的文本是从服务器上读取并通过knockout绑定的。我希望它看起来像这样：

• 第二个.element应该有尽可能多的空间。
• 第一个.element应该占据剩余的空间。如果可能的话，它应该可以分成多行。

一切都运作得很好，但长单词会导致整个表格扩展。是否可以在需要时打断单词？

我还尝试过table-layout:fixed;，但这使得两个100px的列。

编辑：谢谢。word-break: break-all;正是我所需要的。

- Andreas

---

你尝试过使用 word-break: break-all; 吗？ - Kyle

更倾向于使用百分比而不是像素作为宽度单位。 - rOcKiNg RhO

软连字符怎么处理？ - Smamatti

好问题，我也在思考这个问题，但还没有找到解决方法。 :-) - Ladineko

软连字符：word-break: hyphenate:... - Kyle

有许多关于同一基本问题的现有问题。这个“不是一个真正的问题”的原因是您没有指示甚至暗示真正的文本内容是什么。答案的适用性在很大程度上取决于此。您需要决定可接受的断点是什么，以及它是否应该是简单的断点还是连字符（在行末引入“-”）。 - Jukka K. Korpela

Answer 1

使用CSS的word-break属性

可以尝试这个演示

- GajendraSinghParihar

---

我本人没有给它点踩，但是word-break: all;存在问题；它会毫不加选择地换行，通常会在单词内部断开，即使有更好的位置可以断开，比如空格。 - marcus erronius

Answer 2

word-wrap: break-word;
word-break: break-all;

- yunzen

Answer 3

为了添加一个预处理选项，您可以使用HTML标签<wbr/>，即单词换行。它与软连字符（­）具有相同的功能，但在断开时不会添加一个难看的连字符 :) 这里有一个分叉的fiddle供您参考。

只需在每个下划线后插入标签即可。在JavaScript中：

str.replace(/_/, "_<wbr>");

- marcus erronius

Answer 4

您可以在服务器端或JS中“预处理”内容（如果无法在服务器上执行此操作），以将软连字符注入非常长的单词中。使用­实体，这将允许现代浏览器根据需要在软连字符处断开，但当不需要时，字母之间不会有可见的间隙。

- mkoistinen