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?

Oliy

Is it really a bootstrap 3 problem ? I think you should do a substring of your data to get 300 chars, wrap in a span, with an title[|| popover||tooltip] attribute with your full description. – Equity

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

Budworth

sorry I am not much into UI development. Any working example please? :) – Oliy

I tried something like this <td style="width: 50%; height: 15px;" class="ellipses">${record.attributes.P_Description}</td> .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; } but didn't work – Oliy

that's great and it's working. But any idea, how do I show tooltip with full information. – Oliy

Use bootstrap default tooltip or popover and load all the content in that and use a link to display that or you can write js code to show it on hover. – Budworth

I added class="iffyTip" to the td and then added the following javascript to the bottom of the page to add tooltips containing the full text. -- //show tooltip if content is truncated $(document).on('mouseenter', ".iffyTip", function () { var $this = $(this); if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) { $this.tooltip({ container: "body", title: $this.text(), placement: "bottom" }); $this.tooltip('show'); } }); – Sholom

@Reddy ellipses != ellipsis – Amphibian

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;

Muscular

Will not allow you to display whole text as a hint for example. But I don't know why someone downvote? – Amphibian