Search code examples
cssline-breakscss-tablesword-wrap

How to wrap text in table cell at hyphen?

I found the text-wrap and overflow-wrap CSS 3 properties, but they don't seem to do anything.

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

How to wrap text at hyphens within a table cell? Testing on Chrome 14.

Solution

  • You must use table-layout:fixed. Tested in Chrome 15 and 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 Fiddle: http://jsfiddle.net/9ZjCy/1/