css中text-overflow属性与文本截断详解

互联网   06-04 16:49:07   作者:葵中剑   我要评论

这篇文章主要给大家介绍了关于css中text-overflow属性与文本截断的相关资料,文中给出了详细的示例代码供大家参考学习,希望本文的内容对各位前端开发者们能带一定的帮助,需要的朋友们下面跟着小编一起来学习学习吧。

前言

本文主要给大家介绍的是css中text-overflow属性与文本截断的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

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;,还是那个熟悉的味道。纵然可能多了些时髦的功能,却依旧无法掩盖我们在多行截断上的手段之匮乏。

总结

好了,先说到这里了。以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • css3基于animation属性实现的人物动画特效源码

    这是一款css3基于animation属性实现的人物动画特效源码。主要基于animation的background-position属性实现的人物动画效果,没有引入任何外部js元素
    2017-05-17
  • 深入理解css中vertical-align属性

    本篇文章主要介绍了深入理解css中vertical-align属性 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-18
  • 总结30个CSS3选择器

    本文总结了30个CSS3选择器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-13
  • 最新Edge浏览器将支持CSS自定义属性

    最近微软宣布Edge浏览器支持CSS自定义属性,虽然表面上看起来并没有太多改变,但其实却是一个新的原始值类型,允许跨CSS属性完全级联变量,直接通过JavaScript进行交互,详
    2017-03-27
  • css background-attachment属性进阶

    前提是定义了background-image属性,然后用background-attachment来指明背景图的位置是固定于视口的,还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式
    2017-03-08
  • css 背景固定样式background-attachment属性基础

    这篇文章主要为大家介绍了在CSS中,使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动,需要的朋友可以参考下
    2017-03-08
  • 深藏的5个你可能不知道的CSS属性

    在这篇文章中,我将介绍5个相对较新的CSS属性,本文的目的是带领你总览这些CSS的属性,告诉你可以使用哪些值,它们的使用场景,还有一些例子。感兴趣的朋友一起看看吧
    2017-08-15

最新评论