Limiting the column data width to fixed size in Bootstrap 3

Question

I am using Bootstrap 3 responsive tables for showing the data. However, One of column is having huge data compare to rest of the columns as shown below

But I would like to display limited length of description. In short, I would like to display first 2 to 3 lines of data [or 300 characters] and followed by .....

If possible, hovering over the description column should show complete description as tooltip

How do I achieve this?

Answer 1

Set up maximum height on Table row and then Use CSS ellipsis property to show trim data (No JS/Jquery required).

http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

It will trim when data overloads the table row and show dots automatically. You can show full data on tool tip just wrapping your data or view more with tool tip. You can thank me by accepting answer.

CSS:

apply a class mytable on tag and use this css:

.mytable tbody tr td{
  max-width:200px; /* Customise it accordingly */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 2

Put your text in $string variable, then use:

$short_string = (strlen($string) > 300) ? substr($string,0,300) : $string;

This will check your text and if it's over 300 character then this will give you the first 300 characters.
Or use this code to add '...' at the end of your new short string.

$short_string = (strlen($string) > 300) ? substr($string,0,300).'...' : $string;