文本换行-截断CSS
需积分: 16 66 浏览量
2019-01-23
14:54:50
上传
评论
收藏 4.83MB DOCX 举报
纯 CSS 实现多行文字截断
做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果，如下图：
看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需
要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是
希望：
兼容性好，对各大主流浏览器有好的支持
响应式截断，根据不同宽度做出调整
文本超出范围才显示省略号，否则不显示省略号
省略号位置显示刚好
基于上述的准则，下面我就讲介绍各种技巧实现截断效果，并根据上述的评判
标准得出最优解(代码我都传到 jsddle 平台，可点击 demo 地址查看)。
单行文本截断 text-overow
文本溢出我们经常用到的应该就是 text-overow:ellipsis 了，相信大家也很
熟悉，只需轻松几行代码就可以实现单行文本截断。
1. div {
2. white-space: nowrap;
3. overow: hidden;
4. text-over ow: ellipsis;
5. }
实现效果：
评论0
最新资源