博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
文本省略显示
阅读量:5153 次
发布时间:2019-06-13

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

一个盒子里文字过长,如果容器宽度固定,那么文字就会下溢,这样也就不美观。

所以在最末位超出宽度时用省略号显示会美观一点。

点击看效果

demo源码。

    
Document
方法1
这种方法除了火狐下表现不尽人意,其他IE, 谷歌下表现可以。很多文字,这里有很多文字
方法2
这种方法主要解决火狐下的差异,这里有很多文字,这里有很多文字,这里有很多文字
方法3
这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示。
这是一段很短的文字拿来对比。
方法4
这种方法用的是jquery的方法替换掉最大字符长度以外的字符,这里要写长一点
方法5
这种方法用的是jquery的方法替换掉最大字符长度以外的字符,这里要写长一点
方法6
这种方法用的是多行文字句末显示省略号,这里要写长一点这里要写长一点这里要写长一点这里要写长一点这里要写长一点这里要写长一点这里要写长一点这里要写长一点这里要写长一点

  效果图

个人总结:

  如今几乎所有浏览器都支持了text-overflow:ellipsis;

  所以实现方法可以给定盒子宽度和text-overflow:ellipsis;便可以轻松达到效果

  相比以上方法,个人认为方法四是较为出色的。

 

技术参考:http://www.zhangxinxu.com

转载于:https://www.cnblogs.com/lemon-zhang/p/7998112.html

你可能感兴趣的文章
[svc]sort-uniq
查看>>
[svc]mysql备份恢复及常用命令
查看>>
mysql存储引擎之MyISAM 和 InnoDB的比较
查看>>
Mybatis学习总结(五)——动态sql
查看>>
文件读、写相关的常用方法
查看>>
C#时间问题
查看>>
使用JSONP 实现跨域通信
查看>>
服务端性能测试校准v1.2
查看>>
【JavaScript】离线应用与客户端存储
查看>>
2014.12.3 ---Thema:Node.js
查看>>
[转载]启示录:产品原则和产品评审团
查看>>
USACO Training3.3 A Game【区间Dp】 By cellur925
查看>>
修改默认input type=file 样式
查看>>
django 基础框架学习 (二)
查看>>
python学习之内存机制
查看>>
SQL思维导图总结
查看>>
清除浮动塌陷
查看>>
电影项目 (一)
查看>>
Swift加载Xib创建的Controller
查看>>
WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
查看>>