- 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
[pastacode lang=”markup” manual=”%3Cspan%20style%3D%22word-break%3Abreak-all%3B%22%3Elongtextwithoutspace%3C%2Fspan%3E%0A” message=”html code” highlight=”” provider=”manual”/]- 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 :
[pastacode lang=”markup” manual=”%3Ctable%20style%3D%22width%3A%20100%25%3B%22%3E%0A%3Ctr%3E%0A%20%20%20%20%3Ctd%20align%3D%22left%22%3E%3Cdiv%20style%3D%22word-break%3Abreak-all%3B%22%3ELongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%20align%3D%22right%22%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20style%3D%22display%3A%20inline%3B%22%3EFoo%3C%2Fspan%3E%0A%20%20%20%20%3C%2Ftd%3E%0A%3C%2Ftr%3E%0A%3C%2Ftable%3E%0A” message=”html code” highlight=”” provider=”manual”/]- 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
[pastacode lang=”markup” manual=”%20%3Ctable%20style%3D%22width%3A%20100%25%3B%22%20border%3D%221%22%3E%3Ctr%3E%0A%20%20%20%20%3Ctd%20align%3D%22left%22%20width%3D%22100%22%20%3E%3Cdiv%20style%3D%22word-wrap%3A%20break-word%3B%20%22%3Elooooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng%20word%3C%2Fdiv%3E%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%20align%3D%22right%22%3E%3Cspan%20style%3D%22display%3A%20inline%3B%22%3EFoo%3C%2Fspan%3E%3C%2Ftd%3E%0A%3C%2Ftr%3E%3C%2Ftable%3E%0A” message=”html code” highlight=”” provider=”manual”/] [ad type=”banner”]Change your code :
[pastacode lang=”css” manual=”word-wrap%3A%20break-word%3B%0A” message=”css code” highlight=”” provider=”manual”/]to
[pastacode lang=”css” manual=”word-break%3Abreak-all%3B” message=”css code” highlight=”” provider=”manual”/]Example
[pastacode lang=”markup” manual=”%3Ctable%20style%3D%22width%3A%20100%25%3B%22%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%20align%3D%22left%22%3E%0A%20%20%20%20%20%20%3Cdiv%20style%3D%22word-break%3Abreak-all%3B%22%3Elongtextwithoutspacelongtextwithoutspace%20Long%20Content%2C%20Long%20Content%2C%20Long%20Content%2C%20Long%20Content%2C%20Long%20Content%2C%20Long%20Content%2C%20Long%20Content%2C%20Long%20Content%2C%20Long%20Content%2C%20Long%20Content%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%20align%3D%22right%22%3E%3Cspan%20style%3D%22display%3A%20inline%3B%22%3EShort%20Content%3C%2Fspan%3E%0A%20%20%20%20%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%3C%2Ftable%3E%0A” message=”html code” highlight=”” provider=”manual”/]- 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: