CODEWITHSUNDEEP
cssline-breakscss-tablesword-wrap
B Seven
B Seven

Reputation: 45941

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.

Upvotes: 1

Views: 4060

Answers (2)

B Seven
B Seven

Reputation: 45941

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/

Upvotes: 1

Phrogz
Phrogz

Reputation: 303520

You want the proposed (non-standard) CSS 3 Text hyphens property:

td { hyphens: manual }

Note that this is only supported in FF, Chrome, and Safari; it is unsupported in IE or Opera.

Upvotes: 1

Related Questions