一、使用text-overflow
text-overflow属性定义了当文本溢出包含它的元素时应该发生的内容，它能够控制文本应如何截断来适应包含它的区块。
当声明了text-overflow属性时，clip和ellipsis关键字决定了溢出文本的处理方式。
text-overflow: clip; // 截断溢出文本，并不显示省略号 text-overflow: ellipsis; // 截断溢出文本，并显示省略号
另外，在使用text-overflow的时候，为了让文本按照我们要求的方式被处理，我们还需要为其指定white-space和overflow属性。white-space指定如何处理元素内的换行符、空格和制表符。而overflow属性定义了溢出元素内容区域时的处理方式。
overflow: hidden; // 不显示溢出的内容，即隐藏溢出的内容 white-space: nowrap; // 溢出部分不换行
二、使用CSS实现文本溢出显示省略号的方法
我们可以使用CSS来实现文本溢出显示省略号的方法，核心思想是利用伪元素before和after和CSS3的属性linear-gradient来搭配使用。
具体实现方法如下：
/* 定义伪元素，搭配linear-gradient实现渐变效果 */
.ellipsis::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
right: 0;
width: 70px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f5f5f5 50%);
}
.ellipsis::after {
content: "";
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
right: 0;
width: 20px;
background-color: #f5f5f5;
}
/* 使用white-space和overflow属性防止文本溢出和换行，然后使用text-overflow: clip剪裁溢出文本 */
.ellipsis{
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
通过上述代码，我们会看到文本究竟该如何被裁剪。overflow:hidden和white-space:nowrap能够保证文本不会换行，而text-overflow:clip能够保证文本溢出被裁剪，并不显示省略号。最后，通过伪元素before和after及linear-gradient实现了文本溢出时显示渐变过渡，让文本看起来更加自然。
三、使用JS实现文本溢出显示省略号的方法
若我们需要通过JS动态地实现文本溢出显示省略号的方法，可以通过遍历获取到的元素，调用JavaScript的方法来达到。
具体实现如下：
function ellipsis(element) {
let text = element.innerHTML;
let lineHeight = parseInt(window.getComputedStyle(element).lineHeight);
let lines = parseInt(window.getComputedStyle(element).height) / lineHeight;
let node = document.createTextNode(text);
let testNode = document.createElement("span");
testNode.appendChild(node);
testNode.style.display = "inline-block";
testNode.style.width = "100%";
testNode.style.whiteSpace = "nowrap";
element.innerHTML = "";
element.appendChild(testNode);
while (testNode.offsetHeight > element.offsetHeight && lines > 0) {
text = text.substring(0, text.length - 1);
node = document.createTextNode(text + "...");
testNode.innerHTML = "";
testNode.appendChild(node);
lines--;
}
element.innerHTML = testNode.innerHTML;
}
通过上述代码，我们可以拿到文本节点并根据元素高度计算出行数后，不断裁剪文本字符串并添加省略号，直到获取到合适的文本节点并实现省略号截断。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/247525.html
微信扫一扫 
支付宝扫一扫 