Truncate all strings with Javascript

Question

The code below aims to check a string length of a given html element.

<span class="subject">subject abcd</span>

It truncates it if the string is longer than 130 characters, then the string is displayed with three dots at the end of it. What if I have more than ten span elements named .subject, is there a way to make a 'lazy' function to check all of them and truncate only those that are longer than the 130 characters?

vanilla Javascript code:

var res, nodeLength = document.querySelector(".subject").innerHTML;
if(nodeLength.length > 130){
    res = nodeLength.slice(0,130);
    document.querySelector(".subject").innerHTML = res + "...";
}

HTML code:

<div class="item">
    <div class="article">
        <span class="subject">subject abcd</span>
        <span class="time">time</span>
        <span class="text">text</span>
    </div>
    <a href="#" class="more">more</a>
</div>

Andy · Accepted Answer · 2018-02-06 09:59:48Z

2

Use querySelectorAll to pick up all the subject spans, then iterate over them (in this example I've used a 13 character limit rather than 130 for convenience).

Note, also, that using forEach to iterate over nodelists hasn't been adopted by all browsers, but you can use a simple for-loop if you run into problems.

const subjects = document.querySelectorAll(".subject");

subjects.forEach(subject => {
  let text = subject.textContent;
  if (text.length > 13) {
    subject.textContent = `${text.slice(0, 13)}...`;
  }
});

<div class="item">
    <div class="article">
        <span class="subject">subjectdfdfgdfgdfgbd abcd</span>
        <span class="subject">subject abcddfg ddfg df</span>
        <span class="subject">subject abcd</span>
        <span class="subject">subject abcd</span>
        <span class="subject">subject asdgdsvbdrgsdgbbcd</span>
        <span class="time">time</span>
        <span class="text">text</span>
    </div>
    <a href="#" class="more">more</a>
</div>

answered Feb 6, 2018 at 9:59

Andy

63.6k13 gold badges72 silver badges99 bronze badges

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

2 Comments

Moritz Schmitz v. Hülst Over a year ago

However, querySelectorAll will not return live nodes.

Andy Over a year ago

It doesn't need to.

Moritz Schmitz v. Hülst · Accepted Answer · 2018-02-06 10:01:40Z

2

const elements = document.getElementsByClassName('subject');

for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  if (element.innerHTML.length > 130) {
    element.innerHTML = `${element.innerHTML.slice(0, 130)}...`;
  }
}

<div class="subject">
  Hello World!
</div>
<div class="subject">
  Hello StackOverflow!
</div>
<div class="subject">
  Well above 130 characters! Well above 130 characters! Well above 130 characters! Well above 130 characters! Well above 130 characters!
</div>

answered Feb 6, 2018 at 10:01

Moritz Schmitz v. Hülst

3,7316 gold badges44 silver badges78 bronze badges

Comments

Alnitak · Accepted Answer · 2018-02-06 12:50:22Z

2

It's possible to add the ellipsis with CSS:

.subject {
    text-overflow: ellipsis;
}

although you will also need to add constraints to the maximum size of those elements such that overflow does actually happen. A plain <span> element won't honour width properties because they have a default style of display: inline so you may need to adjust your layout accordingly.

The browser will then fit in as much text as it can, so you won't get exactly 130 chars, but I suspect that the result will be more visually appealing, especially with variable width fonts.

This also has the advantage of not actually altering the content on the page, just its display. This means that if you want to support dynamic layouts your text is preserved and will automagically adapt to whatever space is made available for it.

edited Feb 6, 2018 at 12:50

answered Feb 6, 2018 at 9:56

Alnitak

341k72 gold badges420 silver badges503 bronze badges

1 Comment

holler Over a year ago

I thought that text-overflow: ellipsis; works only for one-line together with white-space(nowrap,pre) and overflow:hidden. Is it right? I.e .subject { max-height:50px; overflow:hidden; text-overflow:ellipsis; white-space:pre; } I'm targeting more than 1 line, say from 2-5 lines. For this reason, trying to implement that function to read the character number of an html element and and dots at the end.

Collectives™ on Stack Overflow

Truncate all strings with Javascript

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related