How to get the text when it's out of its own div?

Question

I am wondering if there is any way with Javascript to get a text when it's out of its own <div>. For example if a text is made of 3 sentences, and the last one is only halfy displayed, is there a way to get the entire last sentence, or the first word that isn't displayed with JavaScript ?

Example :

HTML

<div>loooooong loooooong text. Second sentence. Third sentence</div>

CSS

div {
  max-width: 60px;
  max-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@zabusa I think OP wants to put the hidden text inside a js variable. — Federico klez Culloca, Jan 10 '18 at 13:02
Yes @FedericoklezCulloca that's what I would like to achieve — br.julien, Jan 10 '18 at 13:02
`div.innerText` will get all of the text within the div, regardless of whether it is displayed on the page or not. — allnodcoms, Jan 10 '18 at 13:03
@allnodcoms Thank you, but I actually want to get only the part that is hidden if it's possible — br.julien, Jan 10 '18 at 13:05

score 3 · Answer 1 · answered Jan 10 '18 at 13:12

3

To get all the text:

var node = document.getElementsByClass('div')[0];
var fulltext = node.textContent; // gets all textual content, hidden or not

To get the text displayed:

var vistext = node.innerText; // gets only text displayed on page (despite my comment!)

Hidden text is then fulltext - vistext

var hiddentext = fulltext.substr(vistext.length);

Should do the trick...

answered Jan 10 '18 at 13:12

allnodcoms

1,244
10
14

Thank you @allnodcoms for your help. But with this, fulltext and vistext are exactly the same, so hiddenttext is an empty string. But more than half of the text is actually visible so it's not really working for me – br.julien Jan 10 '18 at 16:21
Sorry @br.julien, I got the idea from [here](https://stackoverflow.com/questions/35213147/difference-between-text-content-vs-inner-text). I'll have another think... ;o) – allnodcoms Jan 10 '18 at 16:48

score 0 · Answer 2 · answered Jan 10 '18 at 13:08

0

using Jquery

if ($('#div-id')[0].scrollWidth >  $('#div-id').innerWidth()) {
    //Text has over-flowed
}

reference : Detect if text has overflown

answered Jan 10 '18 at 13:08

Vikas Kandari

793
6
10

How to get the text when it's out of its own div?

2 Answers2