CSS单行/多行文本溢出隐藏
前言
在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号
对于文本的溢出,我们可以分成两种形式:
- 单行文本溢出
- 多行文本溢出
实现
单行文本溢出省略
理解也很简单,即文本在一行内显示,超出部分以省略号的形式展现
实现方式也很简单,涉及的css
属性有:
- 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
才能够生效的
多行文本溢出省略
多行文本溢出的时候,我们可以分为两种情况:
- 基于高度截断
- 基于行数截断
基于高度截断
伪元素 + 定位
核心的css
代码结构如下:
- position: relative:为伪元素绝对定位
- overflow: hidden:文本溢出限定的宽度就隐藏内容)
- position: absolute:给省略号绝对定位
- line-height: 20px:结合元素高度,高度固定的情况下,设定行高, 控制显示行数
- height: 40px:设定当前元素高度
- ::after {} :设置省略号样式
代码如下所示:
<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>
实现原理很好理解,就是通过伪元素绝对定位到行尾并遮住文字,再通过 overflow: hidden
隐藏多余文字
这种实现具有以下优点:
- 兼容性好,对各大主流浏览器有好的支持
- 响应式截断,根据不同宽度做出调整
一般文本存在英文的时候,可以设置word-break: break-all
使一个单词能够在换行时进行拆分
基于行数截断
纯css
实现也非常简单,核心的css
代码如下:
- -webkit-line-clamp: 2:用来限制在一个块元素显示的文本的行数,为了实现该效果,它需要组合其他的WebKit属性)
- display: -webkit-box:和1结合使用,将对象作为弹性伸缩盒子模型显示
- -webkit-box-orient: vertical:和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式
- overflow: hidden:文本溢出限定的宽度就隐藏内容
- text-overflow: ellipsis:多行文本的情况下,用省略号“…”隐藏溢出范围的文本
<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
的CSS
属性扩展,所以兼容浏览器范围是PC
端的webkit
内核的浏览器,由于移动端大多数是使用webkit
,所以移动端常用该形式
需要注意的是,如果文本为一段很长的英文或者数字,则需要添加word-wrap: break-word
属性
最后
为大家准备了一个前端资料包。包含54本,2.57G的前端相关电子书,《前端面试宝典(附答案和解析)》,难点、重点知识视频教程(全套)。
有需要的小伙伴,可以点击下方卡片领取,无偿分享
CSS单行/多行文本溢出隐藏相关推荐
- 单行溢出隐藏没生效_小Tip:关于单行/多行文本溢出隐藏的一些看法
最早的文本溢出隐藏只是简单的hidden,把看不见的都给"去掉",就像这样: 哈哈哈哈哈哈哈哈哈哈哈 .hid{ width: 100px; height: 20px; overf ...
- CSS单行/多行文本溢出显示省略号(...)
1.单行文本CSS设置: { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2.多行文本CSS设置: { over ...
- css单行、多行文本溢出隐藏显示省略号
单行文本溢出隐藏 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 文本溢出时发生的事,ellipsis表示用省略号代替溢出的文本 white ...
- CSS单行、多行文本溢出隐藏
1.单行文本溢出隐藏 .class{white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } 在这里需要注意的是overflow只能作用 ...
- CSS多行文本溢出隐藏,显示省略号
单行文本溢出隐藏: overflow: hidden; 单行文本溢出隐藏显示省略号: white-space: nowrap; overflow: hidden; text-overflow: ell ...
- css多行文本溢出隐藏ie,多行文本溢出隐藏处理,兼容ie,火狐
思路 获取目标文本行高line-height,内容高度offsetHeight 假设 2 行文本溢出隐藏 内容高度除以行高大于2,则加上溢出隐藏的css类名 css代码 .text{ line-hei ...
- 多行文本溢出隐藏省略号
多行文本溢出隐藏省略号 一.单行文本溢出 二.多行文本溢出 一.单行文本溢出 /* 单行文本溢出 */.inlines{overflow: hidden;white-space: nowrap;tex ...
- 单行、多行溢出隐藏显示省略号(解决纯数字、纯英文会失效问题)
单行溢出隐藏: width:300px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出隐藏: displa ...
- overflow:hidden单行和多行文本溢出隐藏需要注意
1.单行文本溢出 单行文本隐藏样式使溢出部分使用省略号显示,需要下面3个属性同时设置: overflow: hidden; white-space: nowrap; text-overflow: el ...
最新文章
- C# Windows CE使用小技巧实例
- Linq to Entities in Ado.net EF的事务
- Android Studio 打包、生成jks密钥、签名Apk、多渠道打包
- FCKeditor 2.6 精简版
- 13个初中级Python程序员练习的项目开发实战
- 产品经理,如何建立自己独特的产品观?(转)
- php编程对联,形容程序员的对联大全
- 基于python的聊天软件的设计与实现_Python基于TCP实现会聊天的小机器人功能示例...
- github issue 搜索_回顾 2020 年 GitHub 的大事件,你知道多少?
- 秒味课堂Angular js笔记------$scope.$watch和$scope.$apply
- java防止sql注入的几个途径_Java防止SQL注入的几个途径
- JAVA网站对接验证码短信接口DEMO示例
- 关于PTC保险丝工作原理总结
- 使用Arcgis Pro 2.5生成地图文件(tpk,mmpk)
- 【Java SE】数组的打印方式
- (2018, BigGAN)用于高保真自然图像合成的大规模 GAN 训练
- 【Java并发编程】Java多线程(四):FutureTask 源码分析
- 《零基础入门学习Python》读书笔记
- crontab python不生效_crontab 中 python 脚本执行失败的解决方法
- python 知识成长(持续更新)
热门文章
- Qt自己编写keyboad虚拟键盘
- Python基础——计算机组成原理、操作系统概述、编程语言的由来、编程语言分类、python介绍、 安装Cpython解释器、 第一个python程序
- 读取nas_最便宜的万兆NAS解决方案—威联通TS-532X
- 面试阿里必知的SQL面试题 100讲
- wpf DataGrid 操作列多个操作项
- 还行,OPPO Find X3 Pro评测:卖的是屏幕和这个超广角!
- 《Real-Time Rendering 4th Edition》读书笔记--简单粗糙翻译 第七章 阴影 Shadows
- 云适配陈本峰:我为什么发起“中国企业级H5产业联盟”
- 小学总结计算机,小学计算机教师年度工作总结
- 一文带你看懂JAVA IO流,史上最全面的IO教学啦(附送JAVA IO脑图