如何用连字符包装表格单元格中的文本？

Question

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

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

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

Answer 1

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

td { hyphens: manual }

请注意，这只是supported in FF, Chrome, and Safari; it is unsupported in IE or 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/