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

这篇文章主要给大家介绍了关于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所主宰的手机端还算是比较好的方式，效果也正是我们所期望的那样：

PaperFake

AI写论文

下载

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 |  | fade |  ]{1,2}

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

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

总结