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;正是我所需要的。

Answer 1

使用CSS word-break属性

试试 DEMO

Answer 2

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

Answer 3

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

Answer 4

要添加预处理选项，您可以使用html标记<wbr/>，即分词。它与软连字符（）的作用相同，但是在没有添加难看的连字符时，为你打破了here's a forked fiddle。

只需在每个下划线后插入标记。在javascript中：

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

在单词内断字

4 个答案: