12

我有一个很长的逗号分隔字符串，我正在尝试使用 css 样式 word-wrap:break word，但它似乎不适用于没有空格的字符串。这是预期的吗？

我的表如下所示：

<table class="table table-striped" style="margin-top:20px;background-color:#f2f2f2;">
  <tbody>
    <tr>
      <td width="150px" valign="top" style="white-space:nowrap;"><b>Favorite Activities:</b></td>
      <td width="50px" style="word-wrap:break-word;">some,really,really,long,long,string,with,out,any,spaces,just,a,comma,delimited,list</td>
    </tr>
  </tbody>
</table>

有什么解决方法吗？

4

3 回答 3

24

word-wrap:break-word;仍处于试验阶段，因此不同的浏览器可能支持或不支持。

如果可以，请在逗号后插入一个零宽度空格。它是 Unicode 或&#8203;HTML 中的 U+200B。浏览器将根据需要在零宽度空间处分解字符串。您可以在生成 HTML 的任何代码中执行此操作，或者编写一些 javascript 来自动插入字符。

另见维基百科。

于 2012-09-25T00:06:55.123 回答
4

我为他的解决方法加上了一个迈克尔的答案。

但是，我已经在一些浏览器（最近版本的 safari、ff、chrome）上测试了 word-wrap 属性，它似乎已经很稳定（我刚刚读到它也适用于最新的 IE 版本）。在您的示例 Paul 中，似乎令人不安的是在表格单元格中使用它（以及任何带有显示的东西：表格单元格）。例如，在一个 div（带有 display: 块）中，它工作得非常好。

看看这个小提琴。搞砸它，你会意识到同样的事情：http: //jsfiddle.net/joplomacedo/DQmJB/

编辑：我刚刚发现这个网站上一个相当流行的问题
已经回答了这个问题。问题确实来自它在表格内使用。建议的解决方法是将表格布局设置为固定并为表格元素提供特定宽度：http: //jsfiddle.net/joplomacedo/DQmJB/3/

如果您可以为表格添加宽度，那么这可能是一个不错的方法。

于 2012-09-25T00:19:04.370 回答
4

这是一个关于如何做到这一点的快速 jQuery 版本。

$('.table-striped td').html($('.table-striped td').html().replace(/,/g , ',&#8203;'));
于 2013-02-05T08:11:01.110 回答