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 tabl
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>
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 {
margin-bottom:50px;
}
dl dt {
background:#ccc;
color:#fff;
float:left;
font-weight:bold;
margin-right:10px;
padding:5px;
width:100px;
}
dl dd {
margin:2px 0;
padding:5px 0;
word-wrap:break-word;
margin-left:120px;
}
<dl>
<dt>test1</dt>
<dd>Fusce ultricies mi nec orci tempor sit amet</dd>
<dt>test2</dt>
<dd>Fusce ultricies</dd>
<dt>longest</dt>
<dd>
Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per.
</dd>
</dl>
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.
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;
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>
i tried all but in my case just work for me
white-space: pre-wrap;
word-wrap: break-word;
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.