{"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&#8217;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&#8217;t 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&#8217;s what the source looks like:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">td {<br\/>  border: 1px solid;}<br\/>&lt;table style=&quot;width: 100%;&quot;&gt;<br\/>  &lt;tr&gt;<br\/>    &lt;td align=&quot;left&quot;&gt;<br\/>      &lt;div style=&quot;word-wrap: break-word;&quot;&gt;Long Content&lt;\/div&gt;<br\/>    &lt;\/td&gt;<br\/>    &lt;td align=&quot;right&quot;&gt;&lt;span style=&quot;display: inline;&quot;&gt;Short Content&lt;\/span&gt;<br\/>    &lt;\/td&gt;<br\/>  &lt;\/tr&gt;<br\/>&lt;\/table&gt;<\/code><\/pre> <\/div>\n<p>&#8220;Long Content&#8221; is larger than the bounds of the page, but it doesn&#8217;t 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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html table<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">td <br\/>{<br\/>  border: 1px solid;<br\/>}<br\/>&lt;table style=&quot;table-layout: fixed; width: 100%&quot;&gt;<br\/>  &lt;tr&gt;<br\/>    &lt;td style=&quot;word-wrap: break-word&quot;&gt;<br\/>LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord<br\/>    &lt;\/td&gt;<br\/>  &lt;\/tr&gt;<br\/>&lt;\/table&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>Try this :<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;td style=&quot;word-break:break-all;&quot;&gt;longtextwithoutspace&lt;\/td&gt;<\/code><\/pre> <\/div>\n<p>or<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;span style=&quot;word-break:break-all;&quot;&gt;longtextwithoutspace&lt;\/span&gt;<\/code><\/pre> <\/div>\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&#8217;t accidentally inheriting the following rule:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">white-space:nowrap;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;td&gt;<br\/>  &lt;div style=&quot;width: 442px; word-wrap: break-word&quot;&gt;<br\/>    &lt;!-- Long Content Here--&gt;<br\/>  &lt;\/div&gt;<br\/>&lt;\/td&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">* { \/\/ this works for all but td<br\/>  word-wrap:break-word;<br\/>}<br\/><br\/>table<br\/> { <br\/>\/\/ this somehow makes it work for td<br\/>  table-layout:fixed;<br\/>  width:100%;<br\/>}<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<p><b>Try this :<\/b><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;table style=&quot;width: 100%;&quot;&gt;<br\/>&lt;tr&gt;<br\/>    &lt;td align=&quot;left&quot;&gt;&lt;div style=&quot;word-break:break-all;&quot;&gt;LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord&lt;\/div&gt;<br\/>    &lt;\/td&gt;<br\/>    &lt;td align=&quot;right&quot;&gt;<br\/>        &lt;span style=&quot;display: inline;&quot;&gt;Foo&lt;\/span&gt;<br\/>    &lt;\/td&gt;<br\/>&lt;\/tr&gt;<br\/>&lt;\/table&gt;<\/code><\/pre> <\/div>\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 &lt;td&gt; or the &lt;div&gt; inside the &lt;td&gt; depending on the layout you want to achieve.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;table style=&quot;width: 100%;&quot; border=&quot;1&quot;&gt;&lt;tr&gt;<br\/>&lt;td align=&quot;left&quot; &gt;&lt;div style=&quot;word-wrap: break-word; width: 100px;&quot;&gt;looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word&lt;\/div&gt;&lt;\/td&gt;<br\/>&lt;td align=&quot;right&quot;&gt;&lt;span style=&quot;display: inline;&quot;&gt;Foo&lt;\/span&gt;&lt;\/td&gt;<br\/>&lt;\/tr&gt;&lt;\/table&gt;<\/code><\/pre> <\/div>\n<p>or<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\"> &lt;table style=&quot;width: 100%;&quot; border=&quot;1&quot;&gt;&lt;tr&gt;<br\/>    &lt;td align=&quot;left&quot; width=&quot;100&quot; &gt;&lt;div style=&quot;word-wrap: break-word; &quot;&gt;looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word&lt;\/div&gt;&lt;\/td&gt;<br\/>    &lt;td align=&quot;right&quot;&gt;&lt;span style=&quot;display: inline;&quot;&gt;Foo&lt;\/span&gt;&lt;\/td&gt;<br\/>&lt;\/tr&gt;&lt;\/table&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">word-wrap: break-word;<\/code><\/pre> <\/div>\n<p><b>to<\/b><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">word-break:break-all;<\/code><\/pre> <\/div>\n<h4 id=\"example\"><span style=\"color: #000000;\"><b>Example<\/b><\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;table style=&quot;width: 100%;&quot;&gt;<br\/>  &lt;tr&gt;<br\/>    &lt;td align=&quot;left&quot;&gt;<br\/>      &lt;div style=&quot;word-break:break-all;&quot;&gt;longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content&lt;\/div&gt;<br\/>    &lt;\/td&gt;<br\/>    &lt;td align=&quot;right&quot;&gt;&lt;span style=&quot;display: inline;&quot;&gt;Short Content&lt;\/span&gt;<br\/>    &lt;\/td&gt;<br\/>  &lt;\/tr&gt;<br\/>&lt;\/table&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;table style=&quot;width: 100%;&quot;&gt;&lt;tr&gt;<br\/>&lt;td align=&quot;left&quot;&gt;&lt;div style=&quot;display:block; word-wrap: break-word; width: 40em;&quot;&gt;loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word&lt;\/div&gt;&lt;\/td&gt;<br\/>&lt;td align=&quot;right&quot;&gt;&lt;span style=&quot;display: inline;&quot;&gt;Foo&lt;\/span&gt;&lt;\/td&gt;<br\/>&lt;\/tr&gt;&lt;\/table&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\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 &#8220;Thisisatext&#8221; instead of &#8220;This is a Text&#8221;), word wrapping does not happens.<\/li>\n<li>Below code works even if there is no delimiters in the text.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;table width=&quot;700&quot; style=&quot;table-layout:fixed&quot; align=&quot;left&quot;&gt;<br\/>&lt;tr&gt;<br\/>&lt;td style=&quot;word-wrap: break-word;&quot;&gt;<br\/>&lt;\/td&gt;<br\/>&lt;\/tr&gt;<br\/>&lt;\/table&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\"><br\/>table<br\/>{<br\/>    table-layout:fixed;<br\/>    border-collapse:collapse;<br\/>}<br\/>td<br\/>{<br\/>    word-wrap: break-word;<br\/>}<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM: We using word-wrap: break-word to wrap text in divs and spans. However, it doesn&#8217;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&#8217;t 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}]}}