Make text word-wrap in an HTML table

Question

I have a table that is populated with the data from a database. The basic table layout is as such:

<table class="cssTable">
  <tr>
    <td class="cssRowCell1">1.</td>
    <td class="cssRowCell2">Data here</td>
  </tr>
</table>

The problem is that if a database contains a long line of text without any spaces in it, the text is not wrapped around the page and sticks out from the right side of the page.

I tried doing the following and none of these worked:

1 Added the following to CSS:

.cssRowCell2
{
    min-width: 880px;
    word-wrap: break-word;
    overflow: hidden;
}

2 Tried to add explicit table width:

<td class="cssRowCell1" width="2%">1.</td>
<td class="cssRowCell2" width="98%">Data here</td>

Any idea how to make it look good?

Do you have to do this with css? Or could you fix it in script before it's displayed (or maybe even before it's saved in the db). I'm pretty sure you can't break words with css, although you can hide it with overflow: hidden and text-overflow:ellipsis . Is javascript an option? — Rob, Mar 04 '12 at 21:48
Yeah, as I wrote below the only way to do it is in ASP.NET script, but the problem is that I can't know the width of the page at the server to introduce line breaks correctly. — ahmd0, Mar 04 '12 at 21:53
I'd guess your CSS isn't being applied somehow. I've used `word-wrap: break-word` before and found it to work in all modern browsers. If nothing else, the `overflow: hidden` should crop the long word off. — jpsimons, Mar 04 '12 at 22:13
@darkporter can you post your html+css in a separate answer? I admit, I might have goofed something up. If it's correct I'll mark it as an answer. — ahmd0, Mar 05 '12 at 00:02

score 1 · Answer 1 · edited May 23 '17 at 12:29

1

Well, there's a nice library just for that: it's called Hyphenator. ) And I'd suggest checking out this discussion, as it's pretty well commented. Rather old question, by the way. )

edited May 23 '17 at 12:29

Community

1
1

answered Mar 04 '12 at 21:48

raina77ow

103,633
15
192
229

So far the only thing that works for me is to introduce spaces in a server-side script (like they showed it there), but the issue here is that I don't know how wide each line of text is, thus the resulting line-breaks look bad as well. – ahmd0 Mar 04 '12 at 21:51

score 1 · Answer 2 · answered Mar 05 '12 at 06:09

To specify an optional hyphenation point in a word (in English or some other language that allows hyphenation), insert the SOFT HYPHEN U+00A0 character, or the equivalent entity reference .

To specify an optional direct line break point in a string (like foo/bar/zap), insert the markup <wbr>, which is frowned upon by W3C recommendations but works well especially if some precautions are taken ( http://www.cs.tut.fi/~jkorpela/html/nobr.html ).

In addition to these reliable (though clumsy) methods, you may consider methods that work much less often (but are more elegant), like the CSS rule hyphens: auto together with language declaration.

score 0 · Answer 3 · answered May 18 '14 at 16:28

0

Along with table cell stylesheet "word-wrap: break-word;", add "table-layout:fixed" in your table stylesheet. It will work.

answered May 18 '14 at 16:28

Manivannan S

11
5

score 0 · Answer 4 · answered Mar 04 '12 at 21:44

0

Have you tried playing around with white-space ?

answered Mar 04 '12 at 21:44

jerone

16,206
4
39
57

I tried white-space: pre-wrap; but it simply adds a new line in front of a long chunk of text. – ahmd0 Mar 04 '12 at 21:52
After reading your question again, I think your problem is with the table width. Try setting a width on your table. An online example would help. – jerone Mar 04 '12 at 21:56

score 0 · Answer 5 · answered Mar 05 '12 at 06:30

Use the below code it might help you.

<table border="1" cellspacing="0" cellpadding="0" class="cssTable" style="table-layout:fixed" width="100%">
  <tr>
    <td width="8%" class="cssRowCell1">1.</td>
    <td width="92%" class="cssRowCell2">Data here   
    </td>
  </tr>
</table>

I have just added style="table-layout:fixed" on table tag and set the width 100%, It is totally depend on you that how much width you want to set for columns.

Note: Css is same as you mentioned.

Make text word-wrap in an HTML table

5 Answers5