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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1791 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

目前我是根据 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-hide 和text-hide。

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

省略

CSS

行数

divheight

3 条回复 • 2020-01-02 15:51:52 +08:00

snarkprayer

2020-01-02 12:22:47 +08:00 via Android

line-clamp

KuroNekoFan

2020-01-02 14:00:32 +08:00

按字符数算
或者用 canvas 的 measureText 来算一下句子占的宽度

zzlit

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`。