V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
zzlit
V2EX  ›  JavaScript

请问一个超出行数出现省略号并且显示更多功能的问题

  •  
  •   zzlit · 2020-01-02 12:02:41 +08:00 · 2432 次点击
    这是一个创建于 1548 天前的主题,其中的信息可能已经有所发展或是发生改变。

    就比如目前是超出两行出现省略号,那么就有三种情况:

    1. 只有一行。
    2. 有两行但是没有出现省略号。
    3. 有两行并且出现了省略号,就有显示更多的功能。

    目前我是根据 divHeight/line-height 来判断是否到达了两行,但是无法判断 2.3 种情况,因为数字字母和符号的宽度和文字不一样。

    又找到一个这样的纯 CSS 实现多行文字截断,但是也还是不知道怎么判断第二行是否出现了省略号。

    请大佬们给一个思路!

    第 1 条附言  ·  2020-01-02 15:43:55 +08:00

    想到了一个方法可以自适应高度,是按照-webkit-line-clamp实现的,利用css截断的例子,我就按照vue来写了:

    <div class="wrap" :class="isEllipsis ? 'warp-hide' : ''  ref="wrap"">
      <div :class="isEllipsis ? 'text-hide' : ''">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
      <div class="hide-text"  ref="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
    </div>
    
    .wrap {
      position: relative;
      line-height: 20px;
    }
    .hide-text {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -9;
      background-color: transparent;
      opacity: 0;
    }
    .warp-hide {
      height: 40px;
      overflow: hidden;
    }
    .text-hide {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    

    再写一个存放文本的容器(一直隐藏状态) hide-text,设置为 absolute,然后将层级设置为下层。 展示出来的文本利用 -webkit-line-clamp: 2 来显示省略号。这时候就只需要判断hide-text的高度有没有高出warp的容器高度。

    const h = this.$refs.wrap.offsetHeight
    const h2 = this.$refs.text.offsetHeight
    this.isEllipsis = h2 > h
    

    利用isEllipsis来添加省略号的classwarp-hidetext-hide

    这里我也不太清楚那个一直隐藏的状态会不会对文档流有什么影响,或者什么未知的bug,但是这样是可以动态的设置高度的,请大佬指点一下。

    3 条回复    2020-01-02 15:51:52 +08:00
    snarkprayer
        1
    snarkprayer  
       2020-01-02 12:22:47 +08:00 via Android
    line-clamp
    KuroNekoFan
        2
    KuroNekoFan  
       2020-01-02 14:00:32 +08:00
    按字符数算
    或者用 canvas 的 measureText 来算一下句子占的宽度
    zzlit
        3
    zzlit  
    OP
       2020-01-02 15:51:52 +08:00
    ```
    <div class="wrap" :class="isEllipsis ? 'warp-hide' : '' ref="wrap"">
    <div :class="isEllipsis ? 'text-hide' : ''">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
    <div class="hide-text" ref="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
    </div>
    <div @click="toogle" v-if="showMore">显示更多</div>
    ```

    ```
    .wrap {
    position: relative;
    line-height: 20px;
    }
    .hide-text {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9;
    background-color: transparent;
    opacity: 0;
    }
    .warp-hide {
    height: 40px;
    overflow: hidden;
    }
    .text-hide {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    }
    ```

    再写一个存放文本的容器(一直隐藏状态) hide-text,设置为 `absolute`,然后将层级设置为下层。
    展示出来的文本利用 `-webkit-line-clamp: 2` 来显示省略号。这时候一开始判断 hide-text 的高度有没有高出 warp 的容器高度来显示`showMore`更多。

    ```
    const h = this.$refs.wrap.offsetHeight
    const h2 = this.$refs.text.offsetHeight
    this.showMore = h2 > h

    toogle () {
    this.isEllipsis = !this.isEllipsis
    }
    ```

    然后利用`toogle`事件改变`isEllipsis`来添加省略号的 class`warp-hide` 和`text-hide`。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2626 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 15:32 · PVG 23:32 · LAX 08:32 · JFK 11:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.