zoukankan      html  css  js  c++  java
  • css多行省略

    单行省略就不用说了,用css实现非常简单,兼容性还非常好。但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 。。。 代替,且不说好不好,万一哪天PM说要改成3行,UI说这个字体改大一点,又得去算一遍,可谓是苦不堪言。

    好在有css3,css3提供了实现完美的多行省略方法,本文已scss为例

    @mixin ellipsis($lineCount: 2) {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: $lineCount;
        line-clamp: $lineCount;
        -webkit-box-orient: vertical;
    }

    咋们想要几行省略的时候直接调用这个方法,传入行数,就能完美实现,不需要去计算。

    但是,但是,,兼容性一直是个问题啊,可以看出,必须要加上前缀才能生效,就不说IE了,就连低端的Android手机都不兼容,真是头疼。。。

    难道就没有别的办法了吗?

    no!!css 是博大精深的,尤其是预编译css工具更强大,例如下面就是 scss的写法,其他less,sass类似

    @mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 2, $bgColor: white) {
        overflow: hidden;
        position: relative;
        line-height: $lineHeight;
        max-height: $lineHeight * $lineCount;
        text-align: justify;
        &:before {
            content: '...';
            width: 1em;
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: $bgColor;
        }
        &:after {
            content: '';
            position: absolute;
            right: 0;
            width: 1em;
            height: 1em;
            margin-top: 0.5em;
            background: $bgColor;
        }
    }

    简单解释一下,

    lineHeight 就是一行的高度,便于计算高度
    lineCount 需要几行省略
    bgColor 背景颜色

    就是巧妙的运用了高度的原理,在没有达到高度的时候显示的是 after,当超出高度的时候显示before 。

    补充js实现多行文本溢出

    const p = document.querySelector('p')
    let words = p.innerHTML.split(/(?<=[u4e00-u9fa5])|(?<=w*?)/g)
    while (p.scrollHeight > p.clientHeight) {
      words.pop()
      p.innerHTML = words.join('') + '...'
    }
    <p>这是一段测试文字,this is some test text,测试文字,测试文字测 </p>

    使用split + 正则表达式将单词与单个文字切割出来存入words

    加上 '...'

    判断scrollHeight与clientHeight,超出的话就从words中pop一个出来

  • 相关阅读:
    获取iframe中的元素
    用npm安装express后express命令找不到
    Openfire 单人聊天和多人聊天(发送消息、接收消息)
    openfire拦截数据包与发送广播
    xmpp with openfire 插件-利用Broadcast实现群
    Smack 结合 Openfire服务器,建立IM通信,发送聊天消息
    openfire默认数据库与应用系统数据库整合
    ios即时通讯客户端开发之-mac上安装MySQL
    ios即时通讯客户端开发之-mac上搭建openfire服务器
    IOS block使用中碰到的一个小坑
  • 原文地址:https://www.cnblogs.com/shenjp/p/10784706.html
Copyright © 2011-2022 走看看