Question

我有一个长逗号分隔的字符串，我正在尝试使用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>

对此有什么解决方法吗？

Answer 1

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

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

另见Wikipedia。

Answer 2

我为迈克尔的解决方案找到了一个答案。

但是，我已经在几个浏览器（最近版本的safari，ff，chrome）上测试了自动换行属性，它确实看起来已经稳定了（我刚刚读到它在最新的IE上也有效）版本）。什么似乎打扰了你的例子保罗，在表格单元格中使用它（以及任何带有display：table-cell的东西）。例如，在div（带显示：块）中，它可以很好地工作。

看看这个小提琴。搞乱它，你会发现同样的事情：http://jsfiddle.net/joplomacedo/DQmJB/

修改
我刚刚发现这个网站已经在一个相当受欢迎的question上得到了解答。问题确实来自于在表格中使用它。解决方法建议将表格布局设置为固定并为表格元素指定特定宽度：http://jsfiddle.net/joplomacedo/DQmJB/3/

如果您可以在表格中添加宽度，那么这可能是一种很好的方法。

Answer 3

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

$('.table-striped td').html($('.table-striped td').html().replace(/,/g , ',&#8203;'));

为什么不用逗号分隔长字符串上的单词？

3 个答案: