css如何实现单行/多行文本溢出的省略样式?
在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号
对于文本的溢出,我们可以分成两种形式:
- 单行文本溢出 多
- 行文本溢出
单行文本溢出省略
即文本在一行内显示,超出部分以省略号的形式展现
<style>p{overflow: hidden;line-height: 40px;width:400px;height:40px;border:1px solid red;text-overflow: ellipsis;white-space: nowrap;}
</style>
<p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p >
效果如下:
- text-overflow:规定当文本溢出时,显示省略符号来代表被修剪的文本
- white-space:设置文字在一行显示,不能换行
- overflow:文字长度超出限定宽度,则隐藏超出的内容
overflow 设为 hidden,普通情况用在块级元素的外层隐藏内部溢出元素,或者配合下面两个属性实现文本溢出省略
white-space:nowrap,作用是设置文本不换行,是overflow:hidden和text-overflow:ellipsis生效的基础
text-overflow属性值有如下:
- clip:当对象内文本溢出部分裁切掉
- ellipsis:当对象内文本溢出时显示省略标记(…)
text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的
多行文本溢出省略
多行文本溢出的时候,我们可以分为两种情况:
- 基于高度截断
- 基于行数截断
基于高度截断
伪元素 + 定位
<style>.demo {position: relative;line-height: 20px;height: 40px;overflow: hidden;}.demo::after {content: "...";position: absolute;bottom: 0;right: 0;padding: 0 20px 0 10px;}
</style><body><div class='demo'>这是一段很长的文本</div>
</body>
- position: relative:为伪元素绝对定位
- overflow: hidden:文本溢出限定的宽度就隐藏内容)
- position: absolute:给省略号绝对定位
- line-height: 20px:结合元素高度,高度固定的情况下,设定行高, 控制显示行数
- height: 40px:设定当前元素高度
- ::after {} :设置省略号样式
实现原理很好理解,就是通过伪元素绝对定位到行尾并遮住文字,再通过 overflow: hidden 隐藏多余文字
这种实现具有以下优点:
- 兼容性好,对各大主流浏览器有好的支持
- 响应式截断,根据不同宽度做出调整
一般文本存在英文的时候,可以设置word-break: break-all使一个单词能够在换行时进行拆分
基于行数截断
<style>p {width: 400px;border-radius: 1px solid red;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
</style>
<p>这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p >
- -webkit-line-clamp: 2:用来限制在一个块元素显示的文本的行数,为了实现该效果,它需要组合其他的WebKit属性)
- display: -webkit-box:和1结合使用,将对象作为弹性伸缩盒子模型显示
- -webkit-box-orient: vertical:和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式
- overflow: hidden:文本溢出限定的宽度就隐藏内容
- text-overflow: ellipsis:多行文本的情况下,用省略号“…”隐藏溢出范围的文本
可以看到,上述使用了webkit的CSS属性扩展,所以兼容浏览器范围是PC端的webkit内核的浏览器,由于移动端大多数是使用webkit,所以移动端常用该形式
需要注意的是,如果文本为一段很长的英文或者数字,则需要添加word-wrap: break-word属性
还能通过使用javascript实现配合css,实现代码如下所示:
css结构如下:
p {position: relative;width: 400px;line-height: 20px;overflow: hidden;}
.p-after:after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;background: -webkit-linear-gradient(left, transparent, #fff 55%);background: -moz-linear-gradient(left, transparent, #fff 55%);background: -o-linear-gradient(left, transparent, #fff 55%);background: linear-gradient(to right, transparent, #fff 55%);
}
javascript代码如下:
$(function(){//获取文本的行高,并获取文本的高度,假设我们规定的行数是五行,那么对超过行数的部分进行限制高度,并加上省略号$('p').each(function(i, obj){var lineHeight = parseInt($(this).css("line-height"));var height = parseInt($(this).height());if((height / lineHeight) >3 ){$(this).addClass("p-after")$(this).css("height","60px");}else{$(this).removeClass("p-after");}});
})
css如何实现单行/多行文本溢出的省略样式?相关推荐
- 转:【CSS/JS学习】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势...
本文来源:http://www.cnblogs.com/penghuwan/p/6682303.html 引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐 ...
- react如何省略号_react 单行多行文本溢出显示省略号...
#### 文本溢出处理 #### ##### 单行文本溢出 ##### 单行文本溢出,可直接用css处理,很简单 .ellipsis { overflow: hidden; text-overflow ...
- CSS基础10-单行/多行文本溢出省略
文本溢出省略 单行文本溢出省略 文本只在一行内显示 <html lang="en"> <head><meta charset="UTF-8& ...
- 单行溢出隐藏没生效_小Tip:关于单行/多行文本溢出隐藏的一些看法
最早的文本溢出隐藏只是简单的hidden,把看不见的都给"去掉",就像这样: 哈哈哈哈哈哈哈哈哈哈哈 .hid{ width: 100px; height: 20px; overf ...
- CSS单行/多行文本溢出显示省略号(...)
1.单行文本CSS设置: { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2.多行文本CSS设置: { over ...
- html最多显示两行,css 实现两行或多行文本溢出显示省略号(...)
1. 大家都知道,强制一行溢出显示省略号(...)的情况很简单 overflow:hidden;//超出的隐藏 text-overflow:ellipsis;//显示省略符号来代表被修剪的文本. wh ...
- CSS+JS+Vue:单行、多行文本溢出显示省略号...的几种实现方式
背景:近期H5项目有个UI需求,单行文本超长时,超出的部分...省略且有一个查看的图标:否则正常展示. 在此背景下了总结下文本溢出的几种实现方式. 1.单行文本溢出[纯css] 效果: <!-- ...
- css多行超出显示点_CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS单行/多行文本溢出隐藏
前言 在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号 对于文本的溢出,我们可以分成两种形式: ...
最新文章
- 毕马威发布《人工智能无处不在》研究报告:人工智能在五大行业的成就与挑战...
- poj3061尺取法/前缀和 二分(java)
- vue+element-ui的分页完整版
- MyBatis入门HelloWorld,注解实现
- 【C语言】三种方式不使用分号输出HelloWorld
- c#动态编译并执行字符串
- [转载] python json 编码(dump/dumps:字典转化为json)、解码(load/loads:json转化为字典)
- 3. 使用Keras-神经网络来拟合非线性模型
- 2021毓英中学高考成绩查询,泉州知名中学2020高考成绩喜报大集合(7.26更新)
- Two Graphs
- Shapely 扩展包功能札记
- android实时抓取屏幕文字,Android录制屏幕的实现方法
- reactjs中使用高德地图计算两个经纬度之间的距离
- java信用卡卡号算法,java实现主要信息的加密解密(模拟信用卡号的保存)
- weblogic打补丁详细步骤(linux)
- 计算机正确的按键手法游戏,原神pc操作方法 基础按键与常见动作教程
- python--format
- 美国华裔二代吐露在美生活真相:出国,请三思而后行
- matlab 变量 鼠标 黑屏,消除运行MATLAB生成独立可执行程序的DOS黑屏
- dnf强化卷代码_DNF4.9日魔盒更新内容详解_全强化卷概率一览_52pk
热门文章
- 三、solidity 交易 transfer 的使用《实战NFT web3 solidity(新版本0.8.+)》
- html空格语言,html的空格代码是什么
- HTML页面空格不显示问题
- char*的vector数组pushback产生错误
- Transactional注解 isolation propagation
- 一篇文章带你玩转华为FusionCompute云计算产品
- java对英文名进行排序
- Netty 内存池(二)内存申请流程
- 吉林大学操作系统上机(实验四:文件系统——Hash结构文件)
- 2022Android面经,历时一个半月,斩获大厂offer