How to divide string inside html table cell depending on the length of the string

Question

I have HTML table where the content of the cell is placed using some templating engine.
I have to make sure that the cell should have fixed width no matter how big or small the content is.

<td align="left" height="50px">
  <a href="#" style="padding-left:5px; display:block; line-height:18px;">
  Traditional Dhow Cruise Dinner in Dubai Creek International Ho...</a>
</td>

case 1: If the content is small(solved).
Then this problem can be solved by having fixed width to the cell.

case 2: If the content is big.
I should make sure all the words that can be fit inside the cell is filled and then after at the end '...' is printed. I have tried counting the characters in the string used the template engine to place <...> after it exceeds the character count. But this does not seems to be working as HTML breaks a string depending on word. Hence sometimes even my 140 characters(limit) getting exceeded the fixed height of the cell. I don't mind using any templating engine to generate the desired output. Please help.

Answer 1

Add this to your css

td a{
 word-break: break-all;
 width: 150px;
 height: auto;
}

Answer 2

word-wrap: break-work is another option for doing so.

td a{ word-wrap: break-work; width: 180px; height: auto; }

word-wrap: break-word recently changed to overflow-wrap: break-word

• will wrap words exceeding, onto the next line.
• adjusts words so that they do not break in middle.

word-break: break-all

• irrespective of continuous word or many words, breaks them at the edge of the width limit.(even within the character of same word)

But I think you need to truncate(...) the word which exceeds the td cell length, so for this you can use

    td a{
        white-space: nowrap;      //keep all text on one line
        overflow: hidden;         //prevent the text to shown outside border
        text-overflow: ellipsis;  //cut off text that exceeds border with an elipsis
    }

Answer 3

Try adding text-overflow:Ellipsis to anchor tag;

change anchor styling to:

padding-left:5px;display:block;line-height:18px;height:50px;‌​width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;

Info

Answer 4

Have a look at Clamp.js. This library "Clamps" content inside an HTML element by adding ellipsis. It works in all browsers.

var module = document.getElementById("html element");

$clamp(module, {clamp: 3}); //Clamp into three rows

or you can make it automatic clamping $clamp(myParagraph, {clamp: 'auto'}); or $clamp(myParagraph, {clamp: '35px'}); into a given height.