如何让多行文本显示省略号

一、使用CSS的text-overflow属性实现省略号

在<style>标签内，添加text-overflow属性，设置overflow为hidden，同时设置white-space为nowrap，即可实现多行文本省略号的效果。

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

在HTML中，给需要加省略号的文本元素添加class="ellipsis"即可。

二、使用JavaScript计算文本宽度实现省略号

如果要求实现更精确的省略号效果，可以使用JavaScript计算文本的宽度，根据宽度来截取文本并添加省略号。

首先，HTML结构如下：

<div id="ellipsis">
    <span id="text">这是一段要进行省略号处理的文本</span>
</div>

然后，在JavaScript中，计算文本的宽度，截取文本并添加省略号：

const ellipsis = document.getElementById('ellipsis');
const text = document.getElementById('text');
const textWidth = text.clientWidth;
const ellipsisWidth = ellipsis.clientWidth;

if (textWidth > ellipsisWidth) {
   const textContent = text.textContent;
   let newText = '';
   for (let i = 0; i < textContent.length; i++) {
       newText += textContent[i];
       if ((text.cloneNode(true)).textContent !== newText) {
           text.textContent = newText + '...';
           break;
       }
   }
}

三、更多技巧

1、使用CSS3的line-clamp属性可以更方便地实现多行文本省略号效果。例如：

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

这里设置了-webkit-line-clamp为3，即最多显示3行文本，超过3行则自动省略号。

2、可以根据不同的需求，定制化省略号的样式，例如颜色、字号、背景色等。需要注意的是，如果在:before或:after伪元素中添加省略号，需要注意伪元素的content属性值是否为字符串，否则需要使用attr()函数来获取元素的属性值，例如：

.ellipsis:before {
    content: "\2026";  /*省略号字符*/
    color: red;
}

四、总结

通过使用CSS和JavaScript，我们可以方便地实现多行文本省略号效果。在实际项目中，我们需要根据具体的需求和效果要求来选择使用哪种方法，以最佳的用户体验和代码效率为目标。