css之文本溢出显示省略号

斜斟星雨

于 2018-01-24 16:52:24 发布

阅读量405

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/HZKang/article/details/79152862

版权

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用CSS实现单行或多行文本溢出时显示省略号的效果，并提供了具体的样式代码及示例。

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

一、单行文本溢出显示省略号：
css：

width: 366px;
font-size: 14px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
border: 3px solid green;

效果图：
这里写图片描述

二、多行文本溢出显示省略号：
css：

display: -webkit-box;
width: 366px;
height: 44px;
font-size: 14px;
line-height: 24px;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
border: 3px solid green;

有个缺点就是只支持webkit内核的浏览器，效果图：
这里写图片描述