{"id":2072,"date":"2017-03-24T14:58:21","date_gmt":"2017-03-24T09:28:21","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=2072"},"modified":"2017-03-28T16:36:05","modified_gmt":"2017-03-28T11:06:05","slug":"word-wrap-html-table","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/word-wrap-html-table\/","title":{"rendered":"[Solved -11 Answers] HTML &#8211; Word-wrap in an HTML table"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM:<\/label><\/p>\n<ul>\n<li>We using word-wrap: break-word to wrap text in divs and spans. However, it doesn\u2019t 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\u2019t wrap. It causes the text to go past the bounds of the cell. This happens on Firefox, Google Chrome and Internet Explorer.<\/li>\n<li>Here\u2019s what the source looks like:<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201dtd%20%7B%0A%20%20border%3A%201px%20solid%3B%7D%0A%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-wrap%3A%20break-word%3B%22%3ELong%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\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p>\u201cLong Content\u201d is larger than the bounds of the page, but it doesn\u2019t break with the above HTML. we tried the suggestions below of adding text-wrap:suppress and text-wrap:normal, but neither helped.<\/p>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>The addition of the table-layout:fixed CSS attribute<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201dtd%20%0A%7B%0A%20%20border%3A%201px%20solid%3B%0A%7D%0A%3Ctable%20style%3D%22table-layout%3A%20fixed%3B%20width%3A%20100%25%22%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%20style%3D%22word-wrap%3A%20break-word%22%3E%0ALongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord%0A%20%20%20%20%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%3C%2Ftable%3E%0A\u201d message=\u201dhtml table\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>Try this :<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ctd%20style%3D%22word-break%3Abreak-all%3B%22%3Elongtextwithoutspace%3C%2Ftd%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p>or<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cspan%20style%3D%22word-break%3Abreak-all%3B%22%3Elongtextwithoutspace%3C%2Fspan%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>A long shot, but double-check with Firebug (or similar) that you aren\u2019t accidentally inheriting the following rule:<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201dwhite-space%3Anowrap%3B\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>This may override your specified line break behaviour.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<ul>\n<li>As mentioned, putting the text within div almost works. You just have to specify the width of the div, which is fortunate static layouts.<\/li>\n<li>This works on FF 3.6, IE 8, Chrome.<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ctd%3E%0A%20%20%3Cdiv%20style%3D%22width%3A%20442px%3B%20word-wrap%3A%20break-word%22%3E%0A%20%20%20%20%3C!\u2013%20Long%20Content%20Here\u2013%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Ftd%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<ul>\n<li>This is one of the solution :<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d*%20%7B%20%2F%2F%20this%20works%20for%20all%20but%20td%0A%20%20word-wrap%3Abreak-word%3B%0A%7D%0A%0Atable%0A%20%7B%20%0A%2F%2F%20this%20somehow%20makes%20it%20work%20for%20td%0A%20%20table-layout%3Afixed%3B%0A%20%20width%3A100%25%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<p><b>Try this :<\/b><\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>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.<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ctable%20style%3D%22width%3A%20100%25%3B%22%20border%3D%221%22%3E%3Ctr%3E%0A%3Ctd%20align%3D%22left%22%20%3E%3Cdiv%20style%3D%22word-wrap%3A%20break-word%3B%20width%3A%20100px%3B%22%3Elooooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng%20word%3C%2Fdiv%3E%3C%2Ftd%3E%0A%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\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p>or<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<h4 id=\"change-your-code\"><span style=\"color: #800000;\"><b>Change your code :<\/b><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201dword-wrap%3A%20break-word%3B%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><b>to<\/b><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dword-break%3Abreak-all%3B\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"example\"><span style=\"color: #000000;\"><b>Example<\/b><\/span><\/h4>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<ul>\n<li>It appears you need to set word-wrap:break-word; on a block element (div), with specified (non relative) width.<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ctable%20style%3D%22width%3A%20100%25%3B%22%3E%3Ctr%3E%0A%3Ctd%20align%3D%22left%22%3E%3Cdiv%20style%3D%22display%3Ablock%3B%20word-wrap%3A%20break-word%3B%20width%3A%2040em%3B%22%3Eloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong%20word%3C%2Fdiv%3E%3C%2Ftd%3E%0A%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\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<ul>\n<li>or using word-break:break-all.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<ul>\n<li>Normally wrapping of text happens automatically in HTML tables.But if the text contains no delimiters(like \u201cThisisatext\u201d instead of \u201cThis is a Text\u201d), word wrapping does not happens.<\/li>\n<li>Below code works even if there is no delimiters in the text.<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ctable%20width%3D%22700%22%20style%3D%22table-layout%3Afixed%22%20align%3D%22left%22%3E%0A%3Ctr%3E%0A%3Ctd%20style%3D%22word-wrap%3A%20break-word%3B%22%3E%0A%3C%2Ftd%3E%0A%3C%2Ftr%3E%0A%3C%2Ftable%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 11:<\/label><\/p>\n<ul>\n<li>If you do not need a table border, apply this:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%0Atable%0A%7B%0A%20%20%20%20table-layout%3Afixed%3B%0A%20%20%20%20border-collapse%3Acollapse%3B%0A%7D%0Atd%0A%7B%0A%20%20%20%20word-wrap%3A%20break-word%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM: We using word-wrap: break-word to wrap text in divs and spans. However, it doesn\u2019t 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\u2019t wrap. It causes the text to go past the bounds of [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[4434,4421,4422,4428,4424,4425,4427,4430,4432,4433,4423,4429,4435,4436,4431,4426],"class_list":["post-2072","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-bootstrap-table-word-wrap","tag-css-how-to-force-table-cell-content-to-wrap","tag-css-using-word-wrap-break-word-within-a-table","tag-css-trick-on-word-wrap-for-table-content","tag-css3-word-wrap-property","tag-how-to-force-table-cell-content-to-wrap-no-more-expanding-table-cells","tag-html-wrap-text-in-table-cell","tag-html-table-fixed-column-width-word-wrap","tag-html-table-wrap-text-without-spaces","tag-html-td-nowrap","tag-html-td-nowrap-attribute","tag-style-word-wrap","tag-table-wrap-text-latex","tag-table-wrap-text-word","tag-td-word-wrap-break-word","tag-web-developers-portal-how-to-wrap-text-in-a-cell-of-a-html-table"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/2072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=2072"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/2072\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=2072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=2072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=2072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}