Comment faire du texte dans une cellule de tableau avec un trait d'union?

Question

J'ai trouvé les propriétés CSS 3 de text-wrap et overflow-wrap, mais elles ne semblent pas faire quoi que ce soit.

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

Comment envelopper le texte à l'intérieur d'une cellule des traits d'union de table? Test sur Chrome 14.

Answer 1

Vous devez utiliser table-layout:fixed. Testé dans Chrome 15 et 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/

Answer 2

Vous voulez que le projet (non standard) CSS 3 Texte hyphens propriété:

td { hyphens: manual } 

Notez que ce n'est supported in FF, Chrome, and Safari; it is unsupported in IE or Opera.