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;
}
相关推荐
java水泥工21 分钟前
基于Echarts+HTML5可视化数据大屏展示-白茶大数据溯源平台V2
大数据·echarts·html5
剑亦未配妥23 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师6 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny076 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy7 小时前
css的基本知识
前端·css
昔人'7 小时前
css `lh`单位
前端·css
破无差8 小时前
《赛事报名系统小程序》
小程序·html·uniapp
Nan_Shu_6149 小时前
Web前端面试题(2)
前端
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
2501_9181269110 小时前
用html5写一个flappybird游戏
css·游戏·html5