Xtykutl

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?

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.

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.

You could put the text into a div (or other container) with a width of 50%.

http://jsfiddle.net/6gjsd/

It's hard to answer you without the HTML, but in general you can put:

style="width: 50%;"

On either the table cell, or place a div inside the table cell, and put the style on that.

But one problem is "50% of what?" It's 50% of the parent element which may not be what you want.

Post a copy of your HTML and maybe you'll get a better answer.

Try using

<table  border="1" cellspacing="0" cellpadding="0" class="template-table" 

style="table-layout: fixed; width: 100%"> 

as table style along with

<td style="word-break:break-word">long text</td>

for td
it works for normal/real scenario text with words, not for random typed letters without gaps