CSS让你玩的飞起，轻松实现文字超出指定行数显示省略号并自动展开收起

如何在网页设计中实现文本超出末尾显示省略号并自动展开收起？

在网页设计中，文本内容可能需要限制显示在特定的行数内，超出部分进行隐藏并显示省略号，同时提供展开或收起全文的功能。这不仅可以提升用户体验，还能让网页布局更美观、简洁。

限制文本行数并添加省略号

利用CSS中的“-webkit-line-clamp”属性，可以限制文本的最大显示行数，并在文本末尾添加省略号。对于不支持WebKit内核的浏览器，则使用“line-clamp”属性作为替代。此外，通过设置“overflow: hidden; text-overflow: ellipsis;”可以隐藏超出部分的文本，并在末尾显示省略号。

添加展开收起功能

使用JavaScript实现文本展开收起功能。首先，获取包含文本内容的元素。然后添加“addEventListener”事件监听器，监听用户点击省略号的事件。当用户点击时，调用“toggle”函数展开或收起文本。

展开收起文本的函数

“toggle”函数用于根据文本的当前状态展开或收起。如果文本处于收起状态（即省略号显示），则移除“collapsed”类，展开文本。反之，如果文本处于展开状态，则添加“collapsed”类，收起文本。

HTML示例

<div class="text-clamp">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget lacus at nunc finibus molestie. Proin non ligula congue, dignissim purus vitae, tincidunt purus. Integer velit libero, sodales vitae malesuada sit amet, ultrices at mi. Sed id purus non odio blandit vehicula. Fusce faucibus quam sit amet enim pretium, id sollicitudin nulla laoreet. Cras posuere fringilla felis, et ultrices sem malesuada ac. Nullam viverra aliquet tempor. Nullam feugiat et massa id placerat. Phasellus condimentum in turpis eu iaculis. Mauris tempor purus sit amet neque accumsan, in fermentum leo finibus. Maecenas facilisis tellus at finibus euismod.
</div>

提示

• 使用CSS的“max-height”属性也可以实现限制文本行数，但它不支持添加省略号。
• 使用JavaScript的“classList.toggle”方法可以轻松展开或收起文本。
• 在HTML中使用“data-”属性存储文本的展开或收起状态，以便页面刷新后保持文本的当前状态。

常见问题解答

1. 如何在不使用JavaScript的情况下实现文本展开收起功能？

可以利用CSS的“display: -webkit-box; -webkit-line-clamp: 3;”实现，但仅限于支持WebKit内核的浏览器。

2. 如何自定义省略号的样式？

通过CSS的“:after”伪元素可以自定义省略号的样式，例如颜色和字体大小。

3. 如何在移动设备上实现文本展开收起功能？

在移动设备上，可以使用触控事件监听器，并在用户点击文本时触发展开收起功能。

4. 如何确保文本展开收起功能在所有浏览器中都兼容？

使用CSS前缀（例如“-webkit-line-clamp”）和回退属性（例如“line-clamp”）确保兼容性。

5. 如何防止文本展开时超出容器宽度？

使用CSS的“max-width”属性限制文本容器的宽度，防止文本超出容器边界。