前端超出文字显示省略号
俩篇文章,360兼容模式、ie8可用(css)
原创:
https://www.daqianduan.com/6179.html
实现方法:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
效果如图:
但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。
接下来重点说一说多行文本溢出显示省略号,如下。
实现方法:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
效果如图:
适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
注:
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
实现方法:
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
效果如图:
适用范围:
该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
转载:
https://blog.csdn.net/zhumengzj/article/details/80801556
360兼容模式、ie8可用(jq)
<script type="text/javascript">$(".intro").each(function () {//你所需效果的div的class、id名var maxwidth = 108;//显示多少字符var textlength = $(this)[0].innerText.length;//计算该第div长度if (textlength > maxwidth) {$(this).html($(this)[0].innerText.substring(0, maxwidth) + '...');}});</script>
前端超出文字显示省略号相关推荐
- css p 文本不换行,超出文字显示省略号
.text {// 文本强制不换行white-space: nowrap;// 文本溢出显示省略号text-overflow: ellipsis;// 溢出的部分隐藏overflow: hidden; ...
- css 超出文字显示省略号
这里写自定义目录标题 单行省略号 多行省略号 单行省略号 直接上代码 <!DOCTYPE html> <html lang="en"> <head&g ...
- 关于用css实现的文字超出部分显示省略号
文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了,于是研究了一番,现总结如下: 我们先来看下HTML代码: <d ...
- html 文字过多如何显示,当页面文字过多时,怎么用css使超出部分显示省略号?(单/多行代码演示)...
当一个页面文字过于冗长时,不仅不利于用户视觉上的感受,更不利于网站内的优化.那么我们怎么使用css超出部分显示省略号代替呢?本篇文章就给大家详细介绍css超出部分显示省略号怎么实现的?希望对有需要的朋 ...
- JS控制文字只显示两行,超出部分显示省略号
JS控制文字只显示两行,超出部分显示省略号 由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jq ...
- 新闻列表中,常用的文字超出后显示省略号..
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- html 文字超出部分,CSS控制文字超出部分显示省略号方法
我们经常会看到有些网站比较长的字符就会显示省略号了,实现这种效果有两个办法,一种利用程序截取字符,另一种利用css实现超出部分显示省略号,下面我来介绍第二种. 测试浏览器: IE6/7/8/9.ope ...
- CSS文字超出部分显示省略号
一行内超出显示省略号 overflow:hidden; /*超出的部分隐藏起来*/ text-overflow:ellipsis;/*超出文本以省略号 */ white-space:nowrap;/* ...
- css超出一行省略号:text-overflow和white-space超出隐藏显示省略号
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号 通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下 ...
最新文章
- Matlab注释语句
- 面试系列-SpringMVC那些事(一)
- mysql按月归档日志表
- python构建简单神经网络_Python构建一个简单的神经网络,Pytorch,搭建
- 1.4 如何学习设计模式
- php省城联动_thinkPHP实现的省市区三级联动功能示例
- 了解一下Bootstrap
- 32位数据源中没有mysql_基于 SpringBoot 多数据源 动态数据源 主从分离 快速启动器...
- 如何修复提交错误的Git分支?
- pytorch和torchvision的安装
- POJ:3126-Prime Path
- retinex算法小感
- 信号与信息处理专业属于计算机类吗,信号与信息处理
- 【数理逻辑三】命题逻辑及形式系统【下】
- Pod环境变量和initContainer
- 的欧美HTML游戏,国外十大HTML5、JavaScript 3D游戏引擎和框架
- python语言设计二级教程答案2019_全国计算机等级考试二级教程2019年版——Python语言程序设计参考答案...
- 如何用计算机算出我喜欢你,如何用数字表白我喜欢你?
- 微信QQ域名防封防红防屏蔽系统源码
- 视觉麦克风:从视频中还原语音
热门文章
- 离线强化学习(Offline RL)系列3: (算法篇) AWAC算法详解与实现
- 【linux】理解 export PATH、LIBRARY_PATH、 LD_LIBRARY_PATH
- 大学计算机实验图灵机模型与计算机硬件,实验1图灵机模型与计算机硬件系统虚拟拆装实验报告.pdf...
- nalu格式annex-B和avcc
- 【学习OpenCV4】案例1:Windows OpenCV C++语言开发环境搭建
- 祝所有程序员1024节日快乐。
- 主动触控笔_如何自定义表面笔触控笔
- yuv数据(nv12和nv21)和RGB数据之间转换的c++代码
- 83. 测试是软件开发的工程严谨度
- 【京东】商品详情页采集