如何在表格单元格中的连字符处换行文本？

Question

我找到了 CSS 3 的 text-wrap 和 Overflow-wrap 属性，但它们似乎没有做任何事情。

http://www.w3schools.com/cssref/css3_pr_text-wrap.asp

如何在表格单元格内的连字符处换行文本？在 Chrome 14 上进行测试。

Answer 1

您需要建议的（非标准）CSS 3 文本 连字符 属性：

td { hyphens: manual }

请注意，仅在 FF、Chrome 和 Safari 中支持； IE 或 Opera 不支持它。

Answer 2

您必须使用table-layout:fixed。在 Chrome 15 和 IE7 中测试。

HTML:

<table>
  <tbody>
    <tr>
      <td>htqdrs-sdfwwwf-dfaaa-com-bbb-ccc-ddd-eee-fff-kljdfgg</td>
    </tr>
  </tbody>
</table>

CSS:

table {    
    table-layout:fixed;
    width : 50px;
    border : 1px solid #000;    
    word-wrap : break-word;
}
td {
    width : 50px;
}

JS 小提琴:
http://jsfiddle.net/9ZjCy/1/