39

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?

Simon East
  • 55,742
  • 17
  • 139
  • 133
dantuch
  • 9,123
  • 6
  • 45
  • 68

6 Answers6

66

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.

starball
  • 20,030
  • 7
  • 43
  • 238
Simon East
  • 55,742
  • 17
  • 139
  • 133
  • 1
    I nested a long word inside a nested table using a div styled with break-word. It did not require table-layout:fixed style. Thanks for a solution that works in IE, Chrome and FF : ) – davidjmcclelland Dec 02 '13 at 17:26
  • Hi David - yes if your content is *inside a DIV* (which is inside a table) then the first snippet is adequate. – Simon East Dec 02 '13 at 21:59
  • For me, `table-layout: fixed;` is a must if cell content is a long single word. – tala9999 Feb 06 '19 at 19:51
12

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.

orlp
  • 112,504
  • 36
  • 218
  • 315
3

this work for me, without using table-layout:fixed; so you still can freely set each column.

table td {
    word-break: break-all;
    word-wrap: break-word;
}
Devlogia
  • 45
  • 7
2

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

http://jsfiddle.net/6gjsd/

Jamie Dixon
  • 53,019
  • 19
  • 125
  • 162
1

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

Vee_Sa
  • 11
  • 3
0

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.

Ariel
  • 25,995
  • 5
  • 59
  • 69