5

我有这个 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来演示它。两个 s 中的文本.element都是从服务器读取并通过knockout绑定的。我希望它看起来如下：

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

一切正常，但长词会导致整个表格扩大。如有必要，是否有可能在言语中打破？

我也尝试过table-layout:fixed;，但这产生了两个100px列。

编辑：谢谢。word-break: break-all;做了我需要的。

4

4 回答 4

4

使用 CSSword-break属性

试试这个演示

于 2012-12-20T12:59:48.580 回答
1

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

于 2012-12-20T12:56:25.020 回答
1 
word-wrap: break-word;
word-break: break-all;
于 2012-12-20T13:00:15.970 回答
1

要添加预处理选项，您可以使用 html 标签<wbr/>，即分词。它与软连字符 ( &shy;) 的作用相同，但在断开时不会添加难看的连字符 :)这里有一个分叉的小提琴供您使用。

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

str.replace(/_/, "_<wbr>");
于 2012-12-20T13:09:35.700 回答