CODEWITHSUNDEEP
javascripthtmlcss
holler
holler

Reputation: 275

Truncate all strings with Javascript

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>

Upvotes: 0

Views: 398

Answers (3)

Alnitak
Alnitak

Reputation: 339816

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.

Upvotes: 2

Moritz Schmitz v. H&#252;lst
Moritz Schmitz v. H&#252;lst

Reputation: 3652

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>

Upvotes: 2

Andy
Andy

Reputation: 63524

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>

Upvotes: 2

Related Questions