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.
-
1What HTML are you using? is it <td>some text...</td> or does your TD contain a <p> or <span>? Also when you say it isn't wrapping I presume you are seeing the TD expand in width when the text is longer than "15%" of the tables width?– scunliffeCommented Jun 29, 2009 at 11:09
-
My HTML has <td>dynamic text.. </td> and what you presume about TD expansion is absolutely correct.– sagarCommented Jun 29, 2009 at 11:23
15 Answers
To Wrap TD text
First set table style
table{
table-layout: fixed;
}
then set TD Style
td{
word-wrap:break-word
}
-
5I suppose it's not acceped because it doesnt work in chrome... :-( Any solution for webkit?– MarcoSCommented Aug 13, 2013 at 15:05
-
4
-
40Interesting... In Chrome, I had to use
white-space: normal
in the td style to get the wrapping to work (instead of theword-wrap:break-word
)– JimCommented Oct 20, 2015 at 14:38 -
6I can confirm I had the same experience with Jim's answer. For some reason Chrome does not respond without the
white-space:normal;
– petrosmmCommented Jul 26, 2017 at 17:00 -
2True for Firefox, too. white-space: normal was all I needed to wrap text inside a TD. Commented Jun 4, 2020 at 20:52
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.
-
7I have attempted this solution, but it doesn't seem to be working in Chrome. I have a table that is being filled dynamically with a hyperlink that is over twice the width of the cell. 'table-layout:fixed' solves the problem with the table stretching, but does not wrap the text; instead it is continuing to stretch off the right of the page. Am I missing something?– VOIDHandCommented Nov 2, 2011 at 22:37
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.
-
I have in both ways. But not able to wrap the text. I am using IE6.0– sagarCommented Jun 29, 2009 at 11:50
-
1ah, IE6. This adds complexity. I'll revise my answer with an IE6 hack. Commented Jun 29, 2009 at 13:19
use word-break
it can be used without styling table
to table-layout: fixed
table {
width: 140px;
border: 1px solid #bbb
}
.tdbreak {
word-break: break-all
}
<p>without word-break</p>
<table>
<tr>
<td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
</tr>
</table>
<p>with word-break</p>
<table>
<tr>
<td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
</tr>
</table>
-
1The only solution that didn't completely decimate the dimensions and text alignment of my cells--thanks– velkoonCommented Apr 25, 2021 at 7:53
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>
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;
}
.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
I had some of my td
s with:
white-space: pre;
This solved it for me:
white-space: pre-wrap;
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.
-
2You might have meant to use CSS instead, but inline styles is generally avoided in modern HTML, especially if you're repeating the same styles over and over for every copied div. Commented Mar 17, 2017 at 16:19
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/
The solution for me is to add following to such column where text want wrap: white-space:normal
Same behaviour in Chrome & Firefox.
Note: I had this problem with Vue/Quasar q-table. I have limited the max-width of column via css/sass (not sure if this is correct with regard to Quasar's q-table).
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.
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>
-
I believe the OP, while not explicitly stating so, is having issues with wrapping non-spaces dynamic content. In this case, the above solution will not work - jsfiddle.net/qZrFW Commented Mar 18, 2013 at 1:49
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".
-
This is correct. Can't understand why people are suggesting using "white-space:nowrap" as that will do precisely the opposite of what the OP wants. Commented Dec 17, 2010 at 18:54
-
31correct no word in english that is this long but suppose i am displaying a filepath , that is going to be continuous and very long.– krispCommented May 2, 2011 at 6:35
-
2..Or a long comma separated list of numbers for example which unfortunately happen to have no spaces. Commented Jun 9, 2012 at 9:07
-
4.. Or a long domainname which can go up to 63 chars (extension and www excluded) http://www.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.com/ Commented Apr 10, 2013 at 11:54
-
I'm trying to solve this problem when the "word" is a very long url. The comment above with the example "ggggggggggggggggggggggggggggggggggggggggggggggg" is not taking into account long urls. Commented May 5, 2019 at 20:56
<!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>