jQuery: Get only text characters not hidden / or hidden

Question

Using the following css code I am able to insure that only 3 lines of text will show up no matter how many lines are in the div. I am using this method as a way to 'introduce a portion of...' the sentence without showing it all.

.vslide_text{
  line-height:1.2em;
  height:3.6em;
  overflow:hidden;
}

However, I need to be able to extract only the non-hidden portion of this element so that I can split it off and put 3 dots ... after it.

I cannot find how to select only those visible characters.

Is this possible ? I am at a wall.

What sayeth the group

Jay CompuMatter

Answer 1

The trick to ellipsis (the name for the three dots) is white-space: nowrap, overflow: hidden and text-overflow: ellipsis.

These are the only three CSS properties that you need for a single line of ellipsis:

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales ligula lectus, quis rhoncus arcu ornare quis. Ut in aliquam massa. Mauris vel ipsum congue, rhoncus enim at, imperdiet odio. Nullam eget ipsum nec tortor venenatis suscipit. Aenean dui ipsum, volutpat eu felis nec, porttitor porttitor leo. Sed leo mauris, lobortis vel auctor at, scelerisque at augue. Suspendisse volutpat velit metus, non elementum quam ultricies in. Ut scelerisque consequat est, ac dictum neque varius ac. In hac habitasse platea dictumst. Donec gravida ante quis velit malesuada congue. Suspendisse potenti. Vestibulum massa lacus, efficitur ac mi iaculis, commodo interdum odio. Suspendisse euismod sodales lorem vel faucibus. Quisque pulvinar ultrices ligula, vitae dictum lacus fringilla eget. Quisque velit diam, laoreet quis bibendum ac, pellentesque nec metus. Vivamus ullamcorper vel augue ut ultricies.</div>

For multiple lines, things get a little more complicated. You first want to start with overflow: hidden and text-overflow: ellipsis like before. You then want to set the display to -webkit-box, and the -webkit-box-orient to vertical. You can then specify how many lines should be shown with -webkit-line-clamp.

The following example shows the same text spanning three lines on Webkit browsers (Chrome and Safari being the main two):

.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales ligula lectus, quis rhoncus arcu ornare quis. Ut in aliquam massa. Mauris vel ipsum congue, rhoncus enim at, imperdiet odio. Nullam eget ipsum nec tortor venenatis suscipit. Aenean dui ipsum, volutpat eu felis nec, porttitor porttitor leo. Sed leo mauris, lobortis vel auctor at, scelerisque at augue. Suspendisse volutpat velit metus, non elementum quam ultricies in. Ut scelerisque consequat est, ac dictum neque varius ac. In hac habitasse platea dictumst. Donec gravida ante quis velit malesuada congue. Suspendisse potenti. Vestibulum massa lacus, efficitur ac mi iaculis, commodo interdum odio. Suspendisse euismod sodales lorem vel faucibus. Quisque pulvinar ultrices ligula, vitae dictum lacus fringilla eget. Quisque velit diam, laoreet quis bibendum ac, pellentesque nec metus. Vivamus ullamcorper vel augue ut ultricies.</div>

Note that the above will only work for Webkit browsers. For non-Webkit browsers (such as Firefox and Internet Explorer), there's actually no easy solution. For these browsers, we must get even more complicated by utilising the ::after pseudo-element:

.ellipsis {
  /* The ellipsis falls outside the bounds */
  max-width: 96%;
  
  /* Hide the overflow */
  overflow: hidden;
  
  /* Required for the absolutely-positioned `:after` */
  position: relative; 
  
  /* Required for truncation */
  line-height: 1.2em;
  max-height: 3.6em; 
  
  /* The last word would overflow on the right without this */
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
}

/* The actual ellipsis */
.ellipsis:after {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}

<div class="ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales ligula lectus, quis rhoncus arcu ornare quis. Ut in aliquam massa. Mauris vel ipsum congue, rhoncus enim at, imperdiet odio nullam eget ipsum nec tortor venenatis suscipit. Aenean dui ipsum, volutpat eu felis nec, porttitor porttitor leo. Sed leo mauris, lobortis vel auctor at, scelerisque at augue. Suspendisse volutpat velit metus, non elementum quam ultricies in. Ut scelerisque consequat est, ac dictum neque varius ac. In hac habitasse platea dictumst. Donec gravida ante quis velit malesuada congue. Suspendisse potenti. Vestibulum massa lacus, efficitur ac mi iaculis, commodo interdum odio. Suspendisse euismod sodales lorem vel faucibus. Quisque pulvinar ultrices ligula, vitae dictum lacus fringilla eget. Quisque velit diam, laoreet quis bibendum ac, pellentesque nec metus. Vivamus ullamcorper vel augue ut ultricies.</div>

Hope this helps! :)

Answer 2

I ended up finding a solution to this on another forum.

The end result fiddle is here: https://jsfiddle.net/vaojjr7p/

It has been tested cross browser.

Thanks to everyone for having a look.

JS:

$('#output').wrapInner('<div/>');
var originaltext = $('#output div').text();

var t = originaltext;

while (true) {
  if ($('#output div').height() <= $('#output').height()) {
    break;
  }

  $('#output div').text(t.substring(0, t.lastIndexOf(" "))+"...");
  t = $('#output div').text();
}

//$('#output div').text(originaltext);

alert('Visible text : "' + originaltext.substring(0, t.length) + '"');
alert('Hidden text : "' + originaltext.substring(t.length) + '"');