Rumah > hujung hadapan web > tutorial css > 关于css中text-overflow属性与文本截断的示例代码分享

关于css中text-overflow属性与文本截断的示例代码分享

黄舟
Lepaskan: 2017-06-18 13:47:56
asal
1836 orang telah melayarinya

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

前言

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

text-overflow与文本截断

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


text-overflow: ellipsis;  
overflow: hidden;  
white-space: nowrap;
Salin selepas log masuk

这小段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);
}
Salin selepas log masuk

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

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


display: -webkit-box;  
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
Salin selepas log masuk

好多年了(>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}
Salin selepas log masuk

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

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

总结

Atas ialah kandungan terperinci 关于css中text-overflow属性与文本截断的示例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan