江苏龙网

  1. 主页 > 生活百科 > >

CSS中完美掌握多行文本修剪技巧( 二 )

css

  • 使用 overflow: hidden; 属性定义元素 。
    • .content p{display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden; }
    CSS中完美掌握多行文本修剪技巧

    文章插图
    使用 Sass Mixin 结合旧方法和新方法现在我们有两种通过CSS修剪文本的方法：省略号方法仅适用于单行文本 ， 而line-clamp属性适用于多行文本修剪 。
    如果可能的话 ， 我更喜欢使用省略号这种旧的方式 ， 因为它更接近 CSS 中的官方方式 。
    鉴于此 ， 我创建了一个 @mixin  ， 它通过接受一个整数的可选参数来同时针对单行修剪和多行修剪 。
    如果mixin传递了一个数字 ， 它将使用多行clamp方法 。如果它没有收到任何参数 ， 它将使用带省略号的单行trim方法 。这是一个重载函数:
    @mixin trim($numLines: null){@if $numLines != null {display:-webkit-box;-webkit-line-clamp:$numLines;-webkit-box-orient:vertical;overflow:hidden;}@else{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;}}我们可以以两种不同的方式使用这个mixin：
    【CSS中完美掌握多行文本修剪技巧】.foo{@include trim; /*will use the ellipsis = else result*/}.bar{@include trim(3); /*will use the line-clamp = if result*/}事例地址：https://codepen.io/elad2412/pen/Poovzzb
    .foo 和 .bar 类的示例结果：
    CSS中完美掌握多行文本修剪技巧

    文章插图
    行数限制的浏览器支持浏览器支持非常广泛 ， 几乎覆盖了全球95%的浏览器 。如果在浏览器中 line-clamp 不起作用 ， 它只是不会修剪文本 。这种回退对于不支持的浏览器已经足够好了 。
    CSS中完美掌握多行文本修剪技巧

    文章插图
    本文转载自微信公众号「大迁世界」 ， 可以通过以下二维码关注 。转载本文请联系大迁世界公众号 。




    推荐阅读


    上一篇：简化Java单元测试数据

    下一篇：如何在 Linux 中安装 Jupyter Notebook