css中text

2021-03-18 00:12 jianzhan

序言

本文关键给大伙儿详细介绍的是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的招数而潜心应用这段编码。自然多行断开還是没戏,在1些跨访问器适配规定较高的场所,前端开发1度必须后端开发帮忙断开內容。

尽管也并不是沒有别的方法完成多行的文字断开,但针对那时候的访问器方式而言不能能所有照料到位。例如如今能够用伪元素:after精准定位在多行的末尾,并施加1个渐变色过渡来仿真模拟断开。

.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);
}

渐变色的应用让断开看起来不那末生涩,但是我1次都没在具体场所用过:),由于这类方法有许多缺点,并且我也素来不喜爱用这类看起来就很丑恶的方法。除非被逼急了,要不然我一直对1本正儿八经地对他人说:“臣妾做不到”~

假如单是是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存在另外一个小难题,便是对汉语的适用有缺陷。相比英文下的完善实际效果,应用汉语时,伴随着器皿宽度的转变,断开的那3个点"..."常常会抽风,只显示信息2个点乃至是1个点,期待升级版的访问器能够搞定这个小难题。

在文字断开时,大家一直习惯性默认设置用3个点来表明,具体上除上面提到的伪元素仿真模拟的方法外,大家也没法变更这类主要表现方式。但是,转过头来再看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>文字来更换断开时万年不会改变的那3个点,能够特定过渡和操纵其间距,乃至能够出示两个值来另外操纵行首与行尾...尽管这好像并沒有甚么卵用,但Firefox竟然早在9.0就最先适用了在其中的<string>值和双值英语的语法!我擦,难道说是当年Firefox在text-overflow遭人诟病后,改过自新1步就迈进全新的坑里去了么...

但是,text-overflow還是那个text-overflow,依然是单行,依然是相互配合老搭档white-space: nowrap;,還是那个熟习的味儿。纵然将会多了些时尚潮流的作用,却依然没法遮盖大家在多行断开上的方式之贫乏。

总结

好了,先说到这里了。以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。