I want to wrap some text that is added to a <td> element.
I have tried with style="word-wrap: break-word;" width="15%".
But it is not wrapping the text. Is it mandatory to give it 100% width?
I have other controls to display so only 15% width is available.
This question is related to
html
css
html-table
word-wrap
Apply classes to your TDs, apply the appropriate widths (remember to leave one of them without a width so it assumes the remainder of the width), then apply the appropriate styles. Copy and paste the code below into an editor and view in a browser to see it function.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="leftcolumn">This is the left column. It is set to 20% width.</td>
<td class="centercolumn">
<p>Hi,</p>
<p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p>
<p>Need help.</p>
<p>TIA.</p>
</td>
<td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td>
</tr>
</table>
</body>
</html>
It's possible that this might work, but it might prove to be a bit of a nuisance at some point in the future (if not immediately).
<style>
tbody td span {display: inline-block;
width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */
overflow: hidden;
white-space: nowrap; }
</style>
...
<table>
<thead>...</thead>
<tfoot>...</tfoot>
<tbody>
<tr>
<td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td>
</tr>
</tbody>
</table>
The rationale for the span is that, as pointed out by others, a <td> will typically expand to accommodate the content, whereas a <span> can be given -and expected to keep- a set width; the overflow: hidden is intended to, but might not, hide what would otherwise cause the <td> to expand.
I'd recommend using the title property of the span to show the text that's present (or clipped) in the visual cell, so that the text's still available (and if you don't want/need people to see it, then why have it in the first place, I guess...).
Also, if you define a width for the td {...} the td will expand (or potentially contract, but I doubt it) to fill its implied width (as I see it this seems to be table-width/number-of-cells), a specified table-width doesn't seem to create the same issue.
The downside is additional markup used for presentation.
HTML tables support a "table-layout:fixed" css style that prevents the user agent from adapting column widths to their content. You might want to use it.
This works really well:
<td><div style = "width:80px; word-wrap: break-word"> your text </div></td>
You can use the same width for all your <div's, or adjust the width in each case to break your text wherever you like.
This way you do not have to fool around with fixed table widths, or complex css.
table-layout:fixed will resolve the expanding cell problem, but will create a new one. IE by default will hide the overflow but Mozilla will render it outside the box.
Another solution would be to use: overflow:hidden;width:?px
<table style="table-layout:fixed; width:100px">
<tr>
<td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
<td>
test
</td>
</tr>
</table>
use word-break it can be used without styling table to table-layout: fixed
table {_x000D_
width: 140px;_x000D_
border: 1px solid #bbb_x000D_
}_x000D_
_x000D_
.tdbreak {_x000D_
word-break: break-all_x000D_
}<p>without word-break</p>_x000D_
<table>_x000D_
<tr>_x000D_
<td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>_x000D_
</tr>_x000D_
</table>_x000D_
_x000D_
<p>with word-break</p>_x000D_
<table>_x000D_
<tr>_x000D_
<td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>_x000D_
</tr>_x000D_
</table>.tbl {
table-layout:fixed;
border-collapse: collapse;
background: #fff;
}
.tbl td {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
Credits to http://www.blakems.com/archives/000077.html
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Poem</th>
<th>Poem</th>
</tr>
<tr>
<td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
</tr>
</table>
<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>
</body>
</html>
To Wrap TD text
First set table style
table{
table-layout: fixed;
}
then set TD Style
td{
word-wrap:break-word
}
To make cell width exactly same as the longest word of the text, just set width of the cell to 1px
i.e.
td {
width: 1px;
}
This is experimental and i came to know about this while doing trial and error
Live fiddle: http://jsfiddle.net/harshjv/5e2oLL8L/2/
This worked for me with some css frameworks (material design lite [MDL]).
table {
table-layout: fixed;
white-space: normal!important;
}
td {
word-wrap: break-word;
}
I believe you've encountered the catch 22 of tables. Tables are great for wrapping up content in a tabular structure and they do a wonderful job of "stretching" to meet the needs of the content they contain.
By default the table cells will stretch to fit content... thus your text just makes it wider.
There's a few solutions.
1.) You can try setting a max-width on the TD.
<td style="max-width:150px;">
2.) You can try putting your text in a wrapping element (e.g. a span) and set constraints on it.
<td><span style="max-width:150px;">Hello World...</span></td>
Be aware though that older versions of IE don't support min/max-width.
Since IE doesn't support max-width natively you'll need to add a hack if you want to force it to. There's several ways to add a hack, this is just one.
On page load, for IE6 only, get the rendered width of the table (in pixels) then get 15% of that and apply that as the width to the first TD in that column (or TH if you have headers) again, in pixels.
Actually wrapping of text happens automatically in tables. The blunder people commit while testing is to hypothetically assume a long string like "ggggggggggggggggggggggggggggggggggggggggggggggg" and complain that it doesn't wrap. Practically there is no word in English that is this long and even if there is, there is a faint chance that it will be used within that <td>.
Try testing with sentences like "Counterposition is superstitious in predetermining circumstances".
I had some of my tds with:
white-space: pre;
This solved it for me:
white-space: pre-wrap;
Source: Stackoverflow.com