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;
}
相关推荐
我不吃饼干4 小时前
在 React 中实现倒计时功能会有什么坑
前端·react.js
小小小小宇5 小时前
前端PerformanceObserver
前端
王者鳜錸5 小时前
PYTHON从入门到实践-18Django从零开始构建Web应用
前端·python·sqlite
拾光拾趣录5 小时前
ES6到HTTPS全链路连环拷问,99%人第3题就翻车?
前端·面试
haaaaaaarry6 小时前
Element Plus常见基础组件(二)
开发语言·前端·javascript
xyphf_和派孔明6 小时前
关于echarts的性能优化考虑
前端·性能优化·echarts
PyHaVolask6 小时前
HTML 表单进阶:用户体验优化与实战应用
前端·javascript·html·用户体验
A了LONE7 小时前
cv弹窗,退款确认弹窗
java·服务器·前端
AntBlack7 小时前
闲谈 :AI 生成视频哪家强 ,掘友们有没有推荐的工具?
前端·后端·aigc
花菜会噎住8 小时前
Vue3核心语法进阶(computed与监听)
前端·javascript·vue.js