html文本溢出显示省略字符的两种常用解决方法

1. 前言

在前端开发中，经常会遇到一个问题：文本内容过长，溢出显示时需要省略，但又不希望直接将文本截断。这时我们需要采用一些解决办法来实现这个效果。本文主要介绍两种比较常用的解决办法。

2. CSS中text-overflow属性

text-overflow属性可以用来设置文本溢出时的省略符号。它有三个取值：

clip：隐藏溢出部分

ellipsis：用省略号代替溢出部分

string：用指定的字符串代替溢出部分，可以在content属性中设置该字符串的值

2.1 使用方法

text-overflow属性一般是和overflow:hidden属性一起使用，因为只有当父元素设置了overflow:hidden后，文本内容才会被截断。

.container {
  overflow: hidden;
  white-space: nowrap; /* 禁止换行 */
  text-overflow: ellipsis; /* 使用省略号代替溢出部分 */
}

需要注意的是，text-overflow属性一般只在单行元素中使用，否则可能会出现一些意料之外的问题。

2.2 演示示例

以下是一个简单的演示示例：

可以看到，当元素内容超出父元素宽度时，会用省略号代替后面的内容。

3. JavaScript实现text-overflow

除了使用CSS属性外，我们还可以用JavaScript来实现文本溢出省略的效果。

3.1 使用方法

实现方法比较简单，只需要在文本溢出时截断字符串并加上省略号即可。

function textOverflow(element, maxLength) {
  if (element.innerText.length > maxLength) {
    element.innerText = element.innerText.substr(0, maxLength) + "...";
  }
}

其中，element为需要处理的元素，maxLength为限制的字符数。

3.2 演示示例

以下是一个简单的演示示例：

可以看到，JavaScript实现的效果和CSS实现的效果是一样的。

4. 总结

以上就是两种常用的文本溢出省略的解决办法。在实际开发中，根据实际需求选择合适的方法来处理文本溢出是非常重要的。