Question

下面的代码旨在检查给定html元素的字符串长度。

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

如果字符串超过130个字符，它会截断它，然后字符串在其末尾显示三个点。如果我有超过十个跨度元素名为.subject，有什么方法可以制作一个“懒惰”的元素。函数检查所有这些并截断只有130个字符以上的那些？

vanilla Javascript代码：

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>

Answer 1

可以使用CSS添加省略号：

.subject {
    text-overflow: ellipsis;
}

虽然您还需要为这些元素的最大大小添加约束，以便实际发生溢出。普通<span>元素不会支持宽度属性，因为它们的默认样式为display: inline，因此您可能需要相应地调整布局。

然后浏览器将尽可能多地放入文本，因此您不会得到130个字符，但我怀疑结果会更具视觉吸引力，尤其是对于可变宽度字体。

这也具有不实际改变页面上的内容，仅显示其内容的优点。这意味着如果您想支持动态布局，您的文本将被保留，并将自动适应任何可用空间。

Answer 2

使用{{3}}获取所有主题跨度，然后迭代它们（在此示例中，我使用了13个字符的限制，而不是130为了方便）。

另请注意，使用forEach迭代节点列表还没有被所有浏览器采用，但如果遇到问题，可以使用简单的for循环。

＆＃13;

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

＆＃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>

＆＃13;

Answer 3

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>

使用Javascript截断所有字符串

3 个答案: