多行文本溢出解决方案
发布日期:2021-10-22 14:27:03 浏览次数:1 分类:技术文章

本文共 669 字,大约阅读时间需要 2 分钟。

前言:

在最近的项目中遇到了多行文本需要进行省略号的设置,由此写下这边博客来记录下。

扩展:前面提到了多行也就来讲讲单行文本的省略号

单行省略:text-overflow:ellipsis; w3c官网上说都支持了;所以就提下,关于之前的opera,Firefox不支持的情况在2012年也都支持了;所以可以放心使用了。

具体代码如下

.box{
width:200px; white-space:nowrap; text-overflow:ellipsis;overflow:hidden;}

 

1.如果完全不考虑兼容性进行多行文本省略号的话可以在现代浏览器,例如webkit内核的浏览器,或者移动端,是可以实现多行文本内容超出的, 最后一行显示的,典型的CSS组合如下:

.box{
width: 500px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
-webkit-line-clamp这个就是控制行数的,3就是3; 参考网址: 2.使用JavaScript插件来达到目的 1.Clamp.js 下载及文档地址:2.jQuery插件-jQuery.dotdotdot 下载及文档地址: 另外至于有人提倡使用伪类来模拟我就不说了。。。。可以参考

 

 

 

转载于:https://www.cnblogs.com/wxwdavid/p/4876261.html

转载地址:https://blog.csdn.net/weixin_30361641/article/details/95861847 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Apache工作原理
下一篇:J2EE体系

发表评论

最新留言

逛到本站,mark一下
[***.202.152.39]2024年03月13日 04时32分57秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

chmod 赋权所有_chmod 权限 命令详细用法 2019-04-21
html代码翻译_[译]您知道 HTML 的键盘标签吗? 2019-04-21
html抽奖代码_JavaScript高手之路:封装抽奖效果 2019-04-21
hadoop 3.3 一直停留在running wordcount_蛋价持续下跌,今日跌破3.3元大关!深秋季节价格还能反弹吗?... 2019-04-21
的流程图做完后如何保存_2019超火的半永久眉是哪款?做完后我们如何护理?... 2019-04-21
去除logo 高德地图api_深圳品牌logo升级如何保持原型的同时更具创新? 2019-04-21
二重积分转换成极坐标_二重积分转换极坐标r的范围如何确定? 2019-04-21
python中倒背如流_八字基础知识--倒背如流篇 2019-04-21
以太坊地址和公钥_以太坊地址是什么 2019-04-21
linux查看wifi信号命令_linux – 获取WIFI信号强度 – 寻求最佳方式(IOCTL,iwlist(iw)等)... 2019-04-21
npm 不重启 全局安装后_解决修复npm安装全局模块权限的问题 2019-04-21
vs格式化json 不生效_vs code 格式化 json 配置 2019-04-21
go 字符串反序列化成对象数组_Fastjson 1.2.24反序列化漏洞深度分析 2019-04-21
onmessage websocket 收不到信息_WebSocket断开重连解决方案,心跳重连实践 2019-04-21
hibernate mysql 缓存_hibernate和mysql的缓存问题,没辙了! 2019-04-21
abp框架 mysql_ABP框架使用Mysql数据库 2019-04-21
mysql树形递归删除_使用递归删除树形结构的所有子节点(java和mysql实现) 2019-04-21
linux mysql 不能连接远程_linux mysql 远程连接 2019-04-21
mysql $lt_mongodb中比较级查询条件:($lt $lte $gt $gte)(大于、小于)、查找条件... 2019-04-21
install python_Install python on AIX 7 2019-04-21