How can I access the actual text that is displayed in a DIV when using CSS style overflow: hidden?

Question

I have the following content DIV on my page, which displays dynamic text:

<div id="someContent">
</div>

It uses the following CSS to cut off additional text:

#someContent {
    height: 200px;
    width: 200px;
    overflow: hidden;
}

If I load this text into the DIV:

"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti."

...the CSS causes only the following text to display in the DIV:

"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue"

This works as expected.

However, I was wondering if there is some way that I can access the displayed text using JavaScript. When I try to access the innerHTML property of the DIV, it returns the entire text originally loaded into the DIV.

<script type="text/javascript">
    alert(document.getElementById("mainArticleContent").innerHTML);
</script>

My end goal is to replace the last word in the trimmed content with ellipsis ("..."). I figured I could do this in JavaScript so that it will display in all browsers, not just IE, as with CSS property text-overflow: hidden.

Any ideas? Is this possible?

Try developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp, the number of lines is a function of height, font-size, and line height — nshimiye
– nshimiye, Commented Apr 29, 2022 at 13:31

Dave L · Accepted Answer · 2009-04-22 14:18:20Z

3

I don't think what you're asking to do is possible with javascript.

Alternatively, why not truncate the text at a specific character count server-side? You probably won't have the kind of control you want over the size of the div displayed on the page depending on the font you've selected but it should solve your problem.

Edit:

Take a look at this to get automatic CSS ellipsis. There are a few caveats and it looks pretty browser-specific but this is another method of doing what you want.

edited Apr 22, 2009 at 14:18

answered Apr 22, 2009 at 14:07

Dave L

1,6349 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kbosak · Accepted Answer · 2009-04-22 14:16:19Z

2

This site explains a technique that may be useful for getting the displayed portion of text. I'm not sure how accurate this method would be, but I suspect it'd get you pretty close to what you want: http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript

answered Apr 22, 2009 at 14:16

kbosak

2,1271 gold badge13 silver badges16 bronze badges

Comments

Jerph · Accepted Answer · 2009-04-22 14:37:55Z

Here's a quick thought using jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var innerText = $('#someContent').text();
    var textArray = innerText.split('');
    var formatted = '';
    for(var i in textArray) {
        formatted += '<span>' + textArray[i] + '</span>';
    }
    var heightOfContainer = $('#someContent').height();
    $('#someContent').html(formatted);
    var clipped = '';
    $('#someContent span').each(function(){
        if ($(this).position().top < heightOfContainer) {
            clipped += $(this).text();
        } else {
            return false;
        }
    });
    clipped += '...';
    $('#someContent').html(clipped);
});
</script>

Maiku Mori · Accepted Answer · 2009-04-22 14:17:55Z

1

There's no easy way to do it. You have to calculate how much text can be visible in the DIV based on div size, font size, font type and text offset inside div. Remember you can use negative offset to show different parts from the text.

You should be able to figure out the algorythm to calculate how much of your text the DIV can hold based on all of those numbers, but it's a bit tricky because of linewrap.

answered Apr 22, 2009 at 14:17

Maiku Mori

7,4792 gold badges42 silver badges52 bronze badges

Comments

Dimitris Damilos · Accepted Answer · 2017-08-08 13:21:13Z

1

There is no need to use Javascript to have the ellipsis. You can simply use the CSS text-overflow property and set its value to "ellipsis". You see the documentation here.

And if you want to have it after multiple lines, then advise this guide.

answered Aug 8, 2017 at 13:21

Dimitris Damilos

2,4586 gold badges25 silver badges46 bronze badges

1 Comment

Yen NQ Over a year ago

The author asked how to retrieve the text. What you're telling is to style it. Btw the provided link isn't working.

Damo · Accepted Answer · 2009-04-22 14:18:45Z

0

You could do the same truncation based on character count on the client side. Store the truncated part in some other DOM element (or your own attribute if you don't mind that sort of thing). Have the whole thing set to kick off on body.onLoad().

answered Apr 22, 2009 at 14:18

Damo

11.6k6 gold badges59 silver badges75 bronze badges

Comments

Paul C. Shirley · Accepted Answer · 2013-01-30 22:46:51Z

0

If this is simply for display purposes then you could simply have an absolutely positioned div with "..." in it at the bottom-right of the container, so over the top of the text.

answered Jan 30, 2013 at 22:46

Paul C. Shirley

263 bronze badges

Collectives™ on Stack Overflow

How can I access the actual text that is displayed in a DIV when using CSS style overflow: hidden?

7 Answers 7

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related