CODEWITHSUNDEEP
jqueryhtmlcss
morne
morne

Reputation: 4189

Word wrap up to two lines in a table cell

Sorry for just posting a question without any self labor proof.

I want to word wrap a cell in a table, but only up to 2 lines.

Example

Going wider is also not an option. Any ideas?

Upvotes: 1

Views: 5585

Answers (6)

Ashis Kumar
Ashis Kumar

Reputation: 6544

If you want just to show two lines, and hide rest, the you need to specify the display, line-height, overflow and width and height property of the cell,

.your_class {
    line-height: 16px;
    height: 32px;
    width: 100px; /* This should be as per your requirement */
    overflow: hidden;
    word-break: break-word; /* for breaking longer text */
    word-break: break-all;
    display: block;
}

You can check the working over here http://jsfiddle.net/WLcC4/

Upvotes: 1

Abhitalks
Abhitalks

Reputation: 28387

Please provide a specific width to the table and td.

Apply this css style to the table:

table-layout: fixed;

Apply these css styles to the td you want to fit:

overflow: hidden;
white-space: nowrap;

If you want to show ellipses:

text-overflow: ellipsis;

See this fiddle: http://jsfiddle.net/h4fqm/

Upvotes: 0

Debasish Chowdhury
Debasish Chowdhury

Reputation: 188

This will work

<div style="width:100px; padding:10px; height:50px; overflow:hidden;">
  Your text goes here .... Your text goes here .... Your text goes here ....
</div>

Thanks

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46559

Table cells work very hard to show everything you put in it. Up to the point where they use their width and height properties as rough guidelines, rather than hard restrictions. Need to display more? Then just grow bigger.

The solution is to put a <div> inside the table cell that you give the desired width and height, and overflow:hidden. Then the table cell won't grow, because it won't have to, and the text will not extend beyond the boundaries of the div.

Upvotes: 2

Vinay
Vinay

Reputation: 6322

Do you also want it to truncate by adding ellipsis? If that's the case, I recommend trunk8. If you don't want the ellipsis, just do overflow: hidden and set the height attribute explicitly.

Upvotes: 0

Bindiya Patoliya
Bindiya Patoliya

Reputation: 2764

You have to give the 

height

and 

overflow:hidden

for table cell

Upvotes: 0

Related Questions