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

单行文本:

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

多行文本

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

javascript 复制代码
.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 的三倍。需要显示几行文字就设置为几倍。

javascript 复制代码
.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;
}
相关推荐
Ratten4 分钟前
解决 error when starting dev server TypeError crypto$2.getRandomValues
前端
coding随想7 分钟前
深入浅出DOM3合成事件(Composition Events):如何处理输入法编辑器(IME)的复杂输入流程
前端
六月的雨在掘金7 分钟前
狼人杀法官版,EdgeOne 带你轻松上手狼人杀
前端·后端
Ratten12 分钟前
【npm 解决】---- TypeError: crypto.hash is not a function
前端
前端小大白13 分钟前
JavaScript 循环三巨头:for vs forEach vs map 终极指南
前端·javascript·面试
晴空雨14 分钟前
面试题:如何判断一个对象是否为可迭代对象?
前端·javascript·面试
嘻嘻__15 分钟前
掘金沸点屏蔽脚本分享
前端·掘金社区
用户479492835691516 分钟前
🎨 Prettier 深度解析:从历史演进到内部格式化引擎的完整拆解
前端
Man16 分钟前
uniapp中使用unocss适配多端
前端·css
阿虎儿17 分钟前
React 事件类型完全指南:深入理解合成事件系统
前端·javascript·react.js