CSS line break in TD

Question

If I have a very long string (without spaces!). Can I force the browser to line break it, for example, in a table's td via CSS. Width does not seem to have any effect.

Note: I know it is very unlikely for someone to submit a long string without spaces but you never know ...

I tried:

.gridrow td
{
    padding: 1em;
    text-align: center;
    word-wrap: break-word; 
}

and I use FF as my browser. word-wrap only seems to be used in CSS3?

Kyle · Accepted Answer · 2010-05-27T12:19:53.607

8

I think what you mean is in CSS:

#id
{
  max-width: 100px; /*or whatever*/
  word-wrap: break-word;
}

Tested on your site with Firebug, it works.

Reference article.

edited May 27 '10 at 12:19

answered May 27 '10 at 12:02

Kyle

65,599
28
144
152

Which browser are you testing in? Havbe a live example? – Kyle May 27 '10 at 12:07
Please see edit in original question: http://www.zoonosis.ac.uk/ICONZ/ResearchProjects/PublicResearchProjects?page=1 – cs0815 May 27 '10 at 12:13
Updated my answer, you need to specify max-width. – Kyle May 27 '10 at 12:20
I am no css expert but word-wrap is css3 specific is this actually suppose to be supported/official? – cs0815 May 27 '10 at 13:13
Most modern browsers support it, Gecko and Webkit browsers for sure, I didn't test it in IE, and I wouldn't be surprised if it didn't work. CSS3 is unofficially launched but a lot of the functionality of it has already been implemented in modern browsers, like the CSS transitions in Webkit browsers. So while CSS3 is unofficial at the moment, browser developers are working hard to implement as much of it as they can.. Someone else might be able to elaborate more. www.css3.info for more information. – Kyle May 27 '10 at 13:39
Word-wrap was started by IE, so yes it would support it. – May 27 '10 at 18:52

score 5 · Answer 2 · edited Nov 26 '13 at 00:45

Tables are a special case. They'll keep on expanding if they can, so as not to obscure any content; you can't use overflow: hidden on them either. Here are some options:

Use an optional breaking character. (Source: http://www.quirksmode.org/oddsandends/wbr.html ) If you can control insert a character like  or <wbr> programatically into long strings, this may be a solution.

Perhaps preferably, depending on your situation, you can limit the table to use strict widths, at which point it should obey your rule:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

Thanks. The css does not work for me. I think I might implement a business rule which prevents long words (what is too long haha). Maybe I am splitting hairs here. — cs0815, May 27 '10 at 13:03

score 0 · Answer 3 · edited May 23 '17 at 10:27

0

i think there wordwrap element. search for the wordwrap.

word-wrap: break word

EDITED

REF Word-wrap in a html table

it suggest that there's no good way of doing this.

edited May 23 '17 at 10:27

Community

1
1

answered May 27 '10 at 11:58

Salil

46,566
21
122
156

1

If there _is_ such an element, it would be semantically incorrect to use it. – Eric May 27 '10 at 12:09

CSS line break in TD

3 Answers3