text-overflow与文本截断

CSSer对text-overflow肯定是非常熟悉的,并且,对于单行文本的截断,包含了text-overflow: ellipsis;的这3行代码,可能也是我们最为惯用的。

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

这小段CSS甚至兼容至IE6,毕竟text-overflow: ellipsis;原本就是IE的专属,于是早期文本截断的抗争主要是在Firefox上,直到Firefox7.0,我们才抛开对于FF的伎俩而专注使用这段代码。当然多行截断还是没戏,在一些跨浏览器兼容要求较高的场合,前端一度需要后端帮忙截断内容。

虽然也不是没有其他方式实现多行的文本截断,但对于当时的浏览器形式而言不可能全部照顾到位。比如现在可以用伪元素:after定位在多行的结尾,并施加一个渐变过渡来模拟截断。

.clamp{
  height: 3 .6em;
  line-height: 1.2em;
  overflow: hidden;
  position: relative;
}
.clamp:after{
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

渐变的使用让截断看起来不那么生硬,不过我一次都没在实际场合用过:),因为这种方式有很多弊端,而且我也向来不喜欢用这种看起来就很丑陋的方式。除非被逼急了,不然我总是对一本正经地对别人说:“臣妾做不到”~

如果单单是webkit,通常的做法就是-webkit-line-clamp,对于目前webkit所主宰的手机端还算是比较好的方式,效果也正是我们所期望的那样:

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

好多年了(>5),这段代码还是工作良好,不过现在回过头看看,-webkit-box是旧的flex的语法,虽然现在和新flex语法并存,但指不定哪天就没了呢。但即便如此,也并没有更好的办法,没有替代-webkit-line-clamp的属性,新旧语法也无法混用,我们只好继续乖乖使用“经典”代码。

-webkit-line-clamp存在另一个小问题,就是对中文的支持有瑕疵。相比英文下的完美效果,使用中文时,随着容器宽度的变化,截断的那三个点"..."往往会抽风,只显示2个点甚至是1个点,希望更新版的浏览器可以搞定这个小问题。

在文本截断时,我们总是习惯默认用三个点来表示,实际上除了上面提到的伪元素模拟的方式外,我们也无法更改这种表现形式。不过,回过头来再看一下text-overflow这个属性,新版的标准会带来的更多的可能性。

CSS Basic User Interface Module Level 3目前是CR的状态,text-overflow只有两个值可选:clip 或者 ellipsis,不过到了草案中的Level 4,属性值变得更多:

[ clip | ellipsis | <string> | fade | <fade()> ]{1,2}

我们可以指定<string>文本来替换截断时万年不变的那三个点,可以指定过渡和控制其距离,甚至可以提供两个值来同时控制行首与行尾...虽然这似乎并没有什么卵用,但Firefox居然早在9.0就首先支持了其中的<string>值和双值语法!我擦,莫非是当年Firefox在text-overflow遭人诟病后,痛改前非一步就迈向最新的坑里去了么...

然而,text-overflow还是那个text-overflow,依旧是单行,依旧是配合老搭档white-space: nowrap;,还是那个熟悉的味道。纵然可能多了些时髦的功能,却依旧无法掩盖我们在多行截断上的手段之匮乏。

本文完。


评论加载中...

Disqus提供评论支持,如果评论长时间未加载,请飞跃长城。