实现单行或多行文本溢出后隐藏并显示省略号

最新推荐文章于 2025-06-17 12:38:10 发布

weixin_30300523

最新推荐文章于 2025-06-17 12:38:10 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xianshenglu/p/8110102.html

本文介绍了使用纯CSS实现文本溢出隐藏并显示省略号的方法，包括单行和多行文本的处理方式。单行文本可通过text-overflow、white-space及overflow属性实现，而多行文本则需借助-webkit-line-clamp和-webkit-box-orient属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近写项目遇到一个关于文本溢出隐藏并显示省略号的问题，通过查询文档以及阅读了一些博文之后获益不少，特此记录：

1.单行文本溢出隐藏：

先给出实际效果图：

当文本长度超出一行的宽度时，会自动隐藏溢出文字并且最后显示'...'提示用户。

实现方法：

纯css样式：

<style>
p{
text-overflow: ellipsis;//必须
white-space: nowrap;//必须
overflow: hidden;//必须
}
</style>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ut optio et, blanditiis incidunt! Quas saepe accusamus
        natus, atque nam impedit temporibus ad et repudiandae aliquam asperiores, aliquid, possimus iste.</p>
</body>

上面为p标签设置的3个css属性是必须，缺一不可，其中：

text-overflow:定义文本溢出时如何处理，有2个有效值：

clip：当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis：当内联内容溢出块容器时，将溢出部分替换为（...）。

2.多行文本溢出隐藏：

实际效果图：

这里有两行文本，第二行文本溢出时，隐藏超出文本并显示'...'

与单行文本不同的是，这里不能使用上面的text-overflow属性，这里使用webkit内核浏览器专用方法，所以可以用在移动端。代码：

<style>
p {
overflow: hidden;//必须
display: -webkit-box;//必须
-webkit-line-clamp: 2;//必须
-webkit-box-orient: vertical;//必须
}
</style>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ut optio et, blanditiis incidunt! Quas saepe accusamus
        natus, atque nam impedit temporibus ad et repudiandae aliquam asperiores, aliquid, possimus iste.</p>
</body>

上面代码中：