前端进阶|第十四天 文本溢出除了截断还有CSS3

  1. 云栖社区>
  2. 博客>
  3. 正文

前端进阶|第十四天 文本溢出除了截断还有CSS3

NULLISNULL 2019-10-13 23:15:54 浏览576
展开阅读全文

日常工作中,我们经常会碰到文字的宽度或者高度超过元素的大小,这个时候最长采用的方法就是文字截断,简而言之,就是把在显示前,对文本进行截取处理,只留固定的字数,这种方案虽然好用,但操作起来有点不太酷,如果字符里面混有英文字母数字,会导致字数相同,但宽度不同,显示参差不齐。

某次项目经理为了留多少字纠结半天,从100,120,150,160,180,200,然后又回到100,为此我差点跟他打起来。

当然也可以根据容器宽度来动态决定留多少字。但事实上CSS3已经给我们提供了轻松处理这个事情的方案。

单行

            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

核心属性
text-overflow: [ clip | ellipsis | ]{1,2}

clip:默认值,将溢出的文本裁减掉
ellipsis:将溢出的文本用省略号(...)来表示
:设置一个字符串用来表示溢出的文本

string 怎么设置,试了半天没试出来,有道友说只对火狐有效,嗯,明天去公司试下,如果仅针对火狐就有点鸡肋。

多行

            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; 
            overflow: hidden; 

首先为了保证容器对宽度敏感,需要设置其display 模式,除了-webkit-box,flex也是OK的。
其次设置盒子的方向,一般是垂直,即限制其垂直方向的显示方式, 然后就是关键属性 -webkit-line-clamp登场,限制其要显示的行数。

试过,谷歌模式下OK,目前这些属性已经广泛应用,只要不要IE6,一般都扛得住。

失踪半个月,继续加油。

网友评论

登录后评论
0/500
评论
NULLISNULL
+ 关注