首页   注册   登录
zzlit

zzlit

V2EX 第 381408 号会员,加入于 2019-01-31 13:53:29 +08:00
zzlit 最近回复了
我还以为排名到一定的程度才会给排名呢,原来是被取消了啊
19 天前
回复了 zzlit 创建的主题 JavaScript 请教一个移动端 css 的样式问题
@redam 也行!
@justyeh 非常感谢!
19 天前
回复了 zzlit 创建的主题 JavaScript 请教一个移动端 css 的样式问题
@howell5 移动端 0.5px 不行的
19 天前
回复了 zzlit 创建的主题 JavaScript 请教一个移动端 css 的样式问题
@redam 感谢解答,已找到答案,不过这个 demo 里面 item 外面的 item-wrap 没有贴合两边的导致留白了
19 天前
回复了 zzlit 创建的主题 JavaScript 请教一个移动端 css 的样式问题
@Austaras 我这边需要贴两边然后中间的居中,我尝试过 grid,没有实现想要的效果
19 天前
回复了 zzlit 创建的主题 JavaScript 请教一个移动端 css 的样式问题
怎么不能 append ?忘记说了,最好能只用 css 来解决,用 flex 的 space-between 话,第二行如果只有两个的话就需要手动操作这个 list 再添加一项才能保持样式正常的。
@daquandiao2 @liyang5945 @toacnme @yafoo
```
<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`。
28 天前
回复了 0gys 创建的主题 生活 世界那么大,终于有勇气出去走一走了
ju zhou di a
关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2127 人在线   最高记录 5168   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.3 · 10ms · UTC 02:37 · PVG 10:37 · LAX 18:37 · JFK 21:37
♥ Do have faith in what you're doing.