css文字超出显示省略号

最新推荐文章于 2025-04-27 16:54:52 发布

一只泼皮猿

最新推荐文章于 2025-04-27 16:54:52 发布

阅读量539

点赞数 1

分类专栏： css web

本文链接：https://blog.youkuaiyun.com/weixin_40489411/article/details/115252524

版权

web 同时被 2 个专栏收录

9 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文介绍了两种在CSS中实现文本溢出显示省略号的方法，适用于单行和多行文本。第一种方法利用`-webkit-line-clamp`属性限制显示的行数，第二种方法通过相对定位和背景渐变创建省略号效果。这些技巧对于网页布局和信息展示非常实用。

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

单行文本溢出显示省略号

{
	width: 100px;
	overflow: hidden;  //超出隐藏
	white-space: nowrap; //不折行
	text-overflow: ellipsis; //溢出显示省略号
}

超过2行超出显示省略号

第一种

{
	width: 100px;
	overflow:hidden;   //超出隐藏
    text-overflow:ellipsis;  //溢出显示省略号
    white-space: normal;  //不折行
    display:-webkit-box;  
    -webkit-box-orient:vertical;  //子元素排列 vertical（竖排）orhorizontal（横排）
    -webkit-line-clamp:2;/*内容限制的行数*/ 
}

·第二种

span{
	position: relative; 
	max-height: 40px;
	overflow: hidden;
	white-space: normal
}  
span::after{
	content: "..."; 
	position: absolute; 
	bottom: 0; 
	right: 0; 
	padding-left: 40px;  
    background: -webkit-linear-gradient(left, transparent, #fff 55%);  
    background: -o-linear-gradient(right, transparent, #fff 55%);  
    background: -moz-linear-gradient(right, transparent, #fff 55%);  
    background: linear-gradient(to right, transparent, #fff 55%);  
 }