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

文本溢出显示省略字符的两种解决方案

在网页设计过程中，我们经常遇到文本内容过长，超出容器显示范围的情况。这时，如何让溢出的文本以省略号形式展示，成为一个需要解决的问题。今天，我将为大家介绍两种常用的解决方法。

方法一：利用CSS实现文本溢出省略显示

这种方法的实现原理主要是通过CSS样式来控制文本的显示。当文本内容超过容器的高度时，超出部分将以省略号形式显示。具体的CSS代码如下：

```css

display: -webkit-box; / 特定浏览器的显示模式 /

display: -moz-box; / Firefox浏览器的显示模式 /

white-space: pre-wrap; / 保持文本的空白字符 /

word-wrap: break-word; / 允许单词跨行断开 /

overflow: hidden; / 隐藏超出容器的内容 /

text-overflow: ellipsis; / 超出内容以省略号显示 /

-webkit-box-orient: vertical; / 定义盒子的方向为垂直 /

-webkit-line-clamp: 2; / 限制显示的文本行数 /

```

只需将上述样式应用到对应的HTML元素上，即可实现文本溢出省略的效果。

方法二：使用jQuery实现文本截取与替换

这种方法主要通过JavaScript的jQuery库来实现文本的截取与替换。当文本内容超过指定的长度时，将超过部分的文本替换为省略号。具体的jQuery代码如下：

```javascript

$(".text").each(function() { // 对拥有text类的元素进行遍历

if ($(this).text().length > 20) { // 如果文本长度大于20字

$(this).html($(this).text().replace(/\s+/g, "").substr(0, 80) + "..."); // 将部分文本替换为省略号

}

});

```