CODEWITHSUNDEEP
htmlcss
dantuch
dantuch

Reputation: 9293

force line break in html table cell

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?

Upvotes: 43

Views: 250845

Answers (7)

Simon E.
Simon E.

Reputation: 58570

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, it works a bit differently. You have two options:

  1. You can wrap the content in a <div> (or other block tag such as <p>) and use the CSS shown above

  2. Apply table-layout: fixed to your <table> tag. This unfortunately means the columns widths are no longer fluid, but are instead 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.

Upvotes: 73

Jerry Sam
Jerry Sam

Reputation: 111

table td, table th{
  white-space: normal !important;
  word-break: normal !important;
  word-wrap: break-word !important;
}

white-space is the right parameter to use.

Upvotes: 1

Devlogia
Devlogia

Reputation: 55

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;
}

Upvotes: 4

Vee_Sa
Vee_Sa

Reputation: 11

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

Upvotes: 1

Jamie Dixon
Jamie Dixon

Reputation: 54021

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

http://jsfiddle.net/6gjsd/

Upvotes: 2

Ariel
Ariel

Reputation: 26783

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.

Upvotes: 0

orlp
orlp

Reputation: 117846

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.

Upvotes: 12

Related Questions