Menu
I'm trying to use the CSS word-wrap property with break-word value. I want to use this inside a td, and apparently need to use a additional div tag for this to work. fine.
I tried to build a simplified use-case:
HTML:
<table class="sectors">
<tr>
<td><div>HURTEAUX / Jean-Baptiste mr)</div></td>
<td><div>CHEUNJGgdfgdfvfsefsdfsdfsdfsdvvvHJG / Samuel mr</div></td>
<td><div>CHEUNG / Samuel mr)</div></td>
</tr>
</table>
CSS
.sectors td {
border: 1px solid #000;
}
.sectors td div {
width: 150px;
word-wrap: break-word;
border: 1px solid red;
}
Firefox, Chrome and Safari behave as expected (at least as I expect).
screenshot on Firefox 3.5
But IE (IE6, IE7, IE8) has a strange behavior: the text is properly wrapped inside the div (red border), but it seems the td (black border) is allocating extra space for no reason.
screenshot on IE7
Any workaround or explanation?
1000
There are two methods to wrap table cell <td> content using CSS which are given below: Using word-wrap property: This property is used to allow long words to break and wrap onto the next line. Using word-break property: This property is used to specify how to break the word when the word reached at end of the line.
If you've faced the situation when you need to wrap words in a <div>, you can use the white-space property with the "pre-wrap" value to preserve whitespace by the browser and wrap the text when necessary and on line breaks. Also, you'll need the word-wrap property.
Use the border-collapse property set to "collapse" and table-layout property set to "fixed" on the <table> element. Also, specify the width of the table. Then, set the word-wrap property to its "break-word" value for <td> elements and add border and width to them.
The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow. .example { overflow-wrap: break-word; }
Adding overflow:hidden to the div should sort it out. Can't offer an explanation though, sorry!
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
