您的位置:首页 > Web前端 > > 正文

css文本怎么控制边距(css中text-overflow属性与文本截断详解)

更多 时间:2022-01-23 02:58:45 类别:Web前端 浏览量:1257

css文本怎么控制边距

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

    总结

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