CSS line break problem

Question

Hi,

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. Thanks!

Christian

PS:

I know it is very unlikely that someone submits long strings without space 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???

Answer 1

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.

Answer 2

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.

Answer 3

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:

1. 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.

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

   .grid {
     table-layout:fixed;
     width:600px;
   }