首页 前端知识 html5 文字自动省略,html中把多余文字转化为省略号的实现方法方法

html5 文字自动省略,html中把多余文字转化为省略号的实现方法方法

2024-02-09 20:02:38 前端知识 前端哥 582 613 我要收藏

单行文本:

.box{
	width: 200px;
	background-color: aqua;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

多行文本

1.利用-webkit-line-clamp属性

.box{
	width: 200px;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	border:solid 1px black;
}

缺点:仅适用于webkit内核或移动端页面。在火狐,ie等浏览器并不支持。

2.用伪元素模拟实现

设定固定宽高,多余部分隐藏,在结尾用包含省略号(…)的元素覆盖部分内容。
这里用一个包含了省略号,且背景色为白色的伪元素遮盖了部分内容。高度height 是行高 line-height 的三倍。需要显示几行文字就设置为几倍。


.box{
	position:relative;
	line-height:1.4em;
	height:4.2em;
	overflow:hidden;
}

.box::after {
	content:"...";
	font-weight:bold;
	position:absolute;
	bottom:0;
	right:0;
	padding:0 -20px 1px 45px;
	background-color:white;
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1612.html
标签
评论
发布的文章

CSS样式变换效果及动画

2024-02-23 11:02:51

实现 抽屉效果 css3

2024-02-23 11:02:47

jQuery (JavaScript)进阶使用

2024-02-23 11:02:59

CSS样式

2024-02-23 11:02:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!