I've been using word-wrap: break-word
to wrap text in div
s and span
s. However, it doesn't seem to work in table cells. I 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:
td {_x000D_
border: 1px solid;_x000D_
}
_x000D_
<table style="width: 100%;">_x000D_
<tr>_x000D_
<td>_x000D_
<div style="word-wrap: break-word;">_x000D_
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word_x000D_
</div>_x000D_
</td>_x000D_
<td><span style="display: inline;">Short word</span></td>_x000D_
</tr>_x000D_
</table>
_x000D_
The long word above is larger than the bounds of my page, but it doesn't break with the above HTML. I've tried the suggestions below of adding text-wrap:suppress
and text-wrap:normal
, but neither helped.
This question is related to
html
css
html-table
https://jsfiddle.net/krf0v6pw/
HTML
<table>
<tr>
<td class="overflow-wrap-hack">
<div class="content">
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</div>
</td>
</tr>
</table>
CSS
.content{
word-wrap:break-word; /*old browsers*/
overflow-wrap:break-word;
}
table{
width:100%; /*must be set (to any value)*/
}
.overflow-wrap-hack{
max-width:1px;
}
Benefits:
overflow-wrap:break-word
instead of word-break:break-all
. Which is better because it tries to break on spaces first, and cuts the word off only if the word is bigger than it's container.table-layout:fixed
needed. Use your regular auto-sizing.width
or fixed max-width
in pixels. Define %
of the parent if needed.Tested in FF57, Chrome62, IE11, Safari11
Tables wrap by default, so make sure the display of the table cells are table-cell
:
td {
display: table-cell;
}
Change your code
word-wrap: break-word;
to
word-break:break-all;
Example
<table style="width: 100%;">_x000D_
<tr>_x000D_
<td>_x000D_
<div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>_x000D_
</td>_x000D_
<td><span style="display: inline;">Short Content</span>_x000D_
</td>_x000D_
</tr>_x000D_
</table>
_x000D_
Common confusing issue here is that we have 2 different css properties: word-wrap
and word-break
.
Then on top of that, word-wrap has an option called break-word
.. Easy to mix-up :-)
Usually this worked for me, even inside a table:
word-break: break-word;
The following works for me in Internet Explorer. Note the addition of the table-layout:fixed
CSS attribute
td {_x000D_
border: 1px solid;_x000D_
}
_x000D_
<table style="table-layout: fixed; width: 100%">_x000D_
<tr>_x000D_
<td style="word-wrap: break-word">_x000D_
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord_x000D_
</td>_x000D_
</tr>_x000D_
</table>
_x000D_
Problem with
<td style="word-break:break-all;">longtextwithoutspace</td>
is that it will work not so good when text has some spaces, e.g.
<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>
If word andthenlongerwithoutspaces
fits into table cell in one line but long text with andthenlongerwithoutspaces
does not, the long word will be broken in two, instead of being wrapped.
Alternative solution: insert U+200B (ZWSP), U+00AD (soft hyphen) or U+200C (ZWNJ) in every long word after every, say, 20th character (however, see warning below):
td {_x000D_
border: 1px solid;_x000D_
}
_x000D_
<table style="width: 100%;">_x000D_
<tr>_x000D_
<td>_x000D_
<div style="word-wrap: break-word;">_x000D_
Looooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooong word_x000D_
</div>_x000D_
</td>_x000D_
<td><span style="display: inline;">Short word</span></td>_x000D_
</tr>_x000D_
</table>
_x000D_
Warning: inserting additional, zero-length characters does not affect reading. However, it does affect text copied into clipboard (these characters are of course copied as well). If the clipboard text is later used in some search function in the web app... search is going to be broken. Although this solution can be seen in some well known web applications, avoid if possible.
Warning: when inserting additional characters, you should not separate multiple code points within grapheme. See https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries for more info.
It appears you need to set word-wrap:break-word;
on a block element (div
), with specified (non relative) width. Ex:
<table style="width: 100%;"><tr>_x000D_
<td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>_x000D_
<td><span style="display: inline;">Foo</span></td>_x000D_
</tr></table>
_x000D_
or using word-break:break-all
per Abhishek Simon's suggestion.
The answer that won the bounty is correct, but it doesn't work if the first row of the table has a merged/joined cell (all the cells get equal width).
In this case you should use the colgroup
and col
tags to display it properly:
<table style="table-layout: fixed; width: 200px">
<colgroup>
<col style="width: 30%;">
<col style="width: 70%;">
</colgroup>
<tr>
<td colspan="2">Merged cell</td>
</tr>
<tr>
<td style="word-wrap: break-word">VeryLongWordInThisCell</td>
<td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>
Just add width. This worked for me.
<td style="width:10%;"><strong>Item Name</strong></td>
i have same issue this work fine for me
<style>
td{
word-break: break-word;
}
</style>
<table style="width: 100%;">
<tr>
<td>Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>
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.
eg:
<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>
or
<table style="width: 100%;" border="1"><tr>
<td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>
If you do not need a table border, apply this:
table{
table-layout:fixed;
border-collapse:collapse;
}
td{
word-wrap: break-word;
}
You can try this if it suits you...
Put a textarea inside your td and disable it with background color white and define its number of rows.
<table style="width: 100%;">
<tr>
<td>
<textarea rows="4" style="background-color:white;border: none;" disabled> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</textarea>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>
As mentioned, putting the text within div
almost works. You just have to specify the width
of the div
, which is fortunate for layouts which are static.
This works on FF 3.6, IE 8, Chrome.
<td>
<div style="width: 442px; word-wrap: break-word">
<!-- Long Content Here-->
</div>
</td>
Tested in IE 8 and Chrome 13.
<table style="table-layout: fixed; width: 100%">
<tr>
<td>
<div style="word-wrap: break-word;">
longtexthere
</div>
</td>
<td><span style="display: inline;">Foo</span></td>
</tr>
</table>
This causes the table to fit the width of the page and each column to take up 50% of the width.
If you prefer the first column to take up more of the page, add a width: 80%
to the td
as in the following example, replacing 80% with the percentage of your choice.
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="width:80%">
<div style="word-wrap: break-word;">
longtexthere
</div>
</td>
<td><span style="display: inline;">Foo</span></td>
</tr>
</table>
i tried all but in my case just work for me
white-space: pre-wrap;
word-wrap: break-word;
I found a solution that seems to work in Firefox, Google Chrome and Internet Explorer 7-9. For doing a two-column table layout with long text on the one side. I searched all over for similar problem, and what worked in one browser broke the other, or adding more tags to a table just seems like bad coding.
I did NOT use a table for this. DL DT DD to the rescue. At least for fixing a two-column layout, that is basically a glossary/dictionary/word-meaning setup.
And some generic styling.
dl {_x000D_
margin-bottom:50px;_x000D_
}_x000D_
_x000D_
dl dt {_x000D_
background:#ccc;_x000D_
color:#fff;_x000D_
float:left;_x000D_
font-weight:bold;_x000D_
margin-right:10px;_x000D_
padding:5px;_x000D_
width:100px;_x000D_
}_x000D_
_x000D_
dl dd {_x000D_
margin:2px 0;_x000D_
padding:5px 0;_x000D_
word-wrap:break-word;_x000D_
margin-left:120px;_x000D_
}
_x000D_
<dl>_x000D_
<dt>test1</dt>_x000D_
<dd>Fusce ultricies mi nec orci tempor sit amet</dd>_x000D_
<dt>test2</dt>_x000D_
<dd>Fusce ultricies</dd>_x000D_
<dt>longest</dt>_x000D_
<dd>_x000D_
Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla_x000D_
laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies_x000D_
mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,_x000D_
in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora_x000D_
torquent per conubia nostra, per._x000D_
</dd>_x000D_
</dl>
_x000D_
Using floating word-wrap and margin left, I got exactly what I needed. Just thought I'd share this with others, maybe it will help someone else with a two-column definition style layout, with trouble getting the words to wrap.
I tried using word-wrap in the table cell, but it only worked in Internet Explorer 9, (and Firefox and Google Chrome of course) mainly trying to fix the broken Internet Explorer browser here.
style="table-layout:fixed; width:98%; word-wrap:break-word"
<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >
Demo - http://jsfiddle.net/Ne4BR/749/
This worked great for me. I had long links that would cause the table to exceed 100% on web browsers. Tested on IE, Chrome, Android and Safari.
Turns out there's no good way of doing this. The closest I came is adding "overflow:hidden;" to the div around the table and losing the text.
The real solution seems to be to ditch table though. Using divs and relative positioning I was able to achieve the same effect, minus the legacy of <table>
2015 UPDATE: This is for those like me who want this answer. After 6 years, this works, thanks to all the contributors.
* { // this works for all but td
word-wrap:break-word;
}
table { // this somehow makes it work for td
table-layout:fixed;
width:100%;
}
A solution which work with Google Chrome and Firefox (not tested with Internet Explorer) is to set display: table-cell
as a block element.
<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>
A long shot, but double-check with Firebug (or similar) that you aren't accidentally inheriting the following rule:
white-space:nowrap;
This may override your specified line break behaviour.
This works for me:
<style type="text/css">
td {
/* CSS 3 */
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
}
And table attribute is:
table {
table-layout: fixed;
width: 100%
}
</style>
<td style="word-break:break-all;">longtextwithoutspace</td>
or
<span style="word-break:break-all;">longtextwithoutspace</span>
Check out this demo
<table style="width: 100%;">_x000D_
<tr>_x000D_
<td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>_x000D_
</td>_x000D_
<td>_x000D_
<span style="display: inline;">Foo</span>_x000D_
</td>_x000D_
</tr>_x000D_
</table>
_x000D_
Here is the link to read
Source: Stackoverflow.com