css 实现文字过长自动隐藏功能

《单行文本溢出隐藏与多行文本兼容浏览器溢出显示省略号》

在网页设计中，我们经常遇到文本内容超出容器的情况。如何实现超出部分隐藏并以省略号形式展示，是许多开发者关注的问题。今天，长沙网络推广为大家分享一种利用CSS实现的方法。

对于单行文本，我们可以使用以下样式：

overflow: hidden; / 隐藏超出部分 /

text-overflow: ellipsis; / 超出部分显示省略号 /

white-space: nowrap; / 文本不换行 /

而对于多行文本，需要采取不同策略来兼容不同浏览器。我们可以通过设置固定高度和行高来实现：

p {

position: relative; / 相对定位 /

line-height: 1.4em; / 行高 /

height: 4.2em; / 容器高度，设置为3倍的行高 /

overflow: hidden; / 超出部分隐藏 /

}

为了在最后覆盖部分文字并显示省略号，我们可以使用伪元素：

.p::after {

content: "…"; / 显示省略号 /

font-weight: bold; / 省略号加粗 /

position: absolute; / 绝对定位 /

bottom: 0; / 底部定位 /

right: 0; / 右侧定位 /

padding: 0 20px 1px 45px; / 内边距设置 /

背景渐变: 使用线性渐变背景，使省略号与文本背景相融合。

}

此方法可实现超出规定行数的文本自动隐藏，并以省略号形式展示。希望大家能从中受益。如有任何疑问，请留言，长沙网络推广会及时回复。感谢大家对狼蚁SEO网站的支持与关注！

再次感谢大家的阅读与参与，我们期待与您共同进步，共创辉煌！如果您觉得这篇文章对您有帮助，请不妨分享给更多的朋友，让更多的人受益。