- We using word-wrap: break-word to wrap text in divs and spans. However, it doesn’t seem to work in table cells. We have a table set to width:100%, with one row and two columns. Text in columns, although styled with the above word-wrap, doesn’t wrap. It causes the text to go past the bounds of the cell. This happens on Firefox, Google Chrome and Internet Explorer.
- Here’s what the source looks like:
“Long Content” is larger than the bounds of the page, but it doesn’t break with the above HTML. we tried the suggestions below of adding text-wrap:suppress and text-wrap:normal, but neither helped.
- The addition of the table-layout:fixed CSS attribute
- Try this :
or
- A long shot, but double-check with Firebug (or similar) that you aren’t accidentally inheriting the following rule:
- This may override your specified line break behaviour.
- As mentioned, putting the text within div almost works. You just have to specify the width of the div, which is fortunate static layouts.
- This works on FF 3.6, IE 8, Chrome.
- This is one of the solution :
Try this :
- The only thing that needs to be done is add width to the <td> or the <div> inside the <td> depending on the layout you want to achieve.
or
[ad type=”banner”]Change your code :
to
Example
- It appears you need to set word-wrap:break-word; on a block element (div), with specified (non relative) width.
- or using word-break:break-all.
- Normally wrapping of text happens automatically in HTML tables.But if the text contains no delimiters(like “Thisisatext” instead of “This is a Text”), word wrapping does not happens.
- Below code works even if there is no delimiters in the text.
- If you do not need a table border, apply this:
