文字超出显示省略号解决方案

最新推荐文章于 2024-10-10 11:15:45 发布

原创最新推荐文章于 2024-10-10 11:15:45 发布 · 535 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

CSS 专栏收录该内容

46 篇文章

订阅专栏

介绍了如何在单行和多行文字超出时使用CSS实现显示省略号的效果，主要适用于WebKit浏览器和移动端，同时也提供了跨浏览器的兼容解决方案。

文字单行超出显示省略号

div {
	width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

文字多行超出显示省略号

div {
	width: 200px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

该方法适用于WebKit浏览器及移动端。

跨浏览器兼容方案：

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
}