force line break in html table cell

Question

I'm trying to find a way to force line break in table cell after text inside of it will become longer than say 50% of max allowed size.

How can I do it without any JS function, using just pure HTML with CSS?

Answer 1

I think what you're trying to do is wrap loooooooooooooong words or URLs so they don't push the size of the table out. (I've just been trying to do the same thing!)

You can do this easily with a DIV by giving it the style word-wrap: break-word (and you may need to set its width, too).

div {     word-wrap: break-word;         /* All browsers since IE 5.5+ */     overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */     width: 100%; } 

However, for tables, you must either wrap the content in a DIV (or other block tag) or apply: table-layout: fixed. This means the columns widths are no longer fluid, but are defined based on the widths of the columns in the first row only (or via specified widths). Read more here.

Sample code:

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 */ } 

Hope that helps somebody.

Answer 2

I suggest you use a wrapper div or paragraph:

<td><p style="width:50%;">Text only allowed to extend 50% of the cell.</p></td> 

And you can make a class out of it:

<td class="linebreak"><p>Text only allowed to extend 50% of the cell.</p></td>  td.linebreak p {     width: 50%; } 

All of this assuming that you meant 50% as in 50% of the cell.