5

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

enter image description here

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?

Brian Tompsett - 汤莱恩
  • 5,195
  • 62
  • 50
  • 120
Reddy
  • 16,522
  • 43
  • 127
  • 190
  • 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. – BENARD Patrick Dec 16 '13 at 08:13

2 Answers2

16

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;
}
ravisuhag
  • 1,770
  • 1
  • 11
  • 16
  • sorry I am not much into UI development. Any working example please? :) – Reddy Dec 16 '13 at 08:44
  • I tried something like this ${record.attributes.P_Description} .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; } but didn't work – Reddy Dec 16 '13 at 08:50
  • that's great and it's working. But any idea, how do I show tooltip with full information. – Reddy Dec 18 '13 at 04:54
  • 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. – ravisuhag Dec 18 '13 at 05:50
  • 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'); } }); – Matt Lengenfelder Nov 07 '14 at 20:33
  • @Reddy ellipses != ellipsis – Sebastian Xawery Wiśniowiecki Aug 06 '15 at 12:42
1

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;
osyan
  • 1,518
  • 21
  • 47