兼容各浏览器文本超时省略号...

最新推荐文章于 2022-04-22 11:15:41 发布

原创最新推荐文章于 2022-04-22 11:15:41 发布 · 456 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#兼容各浏览器文本超时省略号...

兼容各浏览器文本超时省略号... 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了 CSS 中如何优雅地处理超出容器的内容，特别是在品牌名称过长的情况下。通过使用相对定位、绝对定位、伪元素和渐变背景来实现内容的截断和省略号显示，同时保持良好的视觉效果。

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

.personalCenter .brandExceedingLen{position:relative;
	line-height:20px;
	max-height:40px;
	overflow:hidden;}
.personalCenter .brandExceedingLen:after{content: "...";  
	position:absolute;
	bottom:6px;
	right:11px;
	color: #FFF;
	padding-left:32px;
	background:-webkit-linear-gradient(left,transparent,#008EFF 65%);
	background:-o-linear-gradient(right,transparent,#008EFF 65%);
	background:-moz-linear-gradient(right,transparent,#008EFF 65%);
	background:linear-gradient(to right,transparent,#008EFF 65%);
}