1. 原生js实现
效果图:
第一div.ellitext_fake展示第一行的完整内容,通过定位z-index及增加背景图遮盖后边内容
第二个div.ellitext_first拼接成带省略号的文本,根据需要看右侧需要留几个字的位置,如上图需要空4个字的位置。则增加: padding-right: 4em; text-indent: -4em;
及多行省略代码
第三个div.ellitext_real是完整的文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ellitext_outer {
text-align: left;
font-size: 14px;
line-height: 1.4;
word-break: break-all;
background-color: #ccc;
padding: 0.8rem;
}
.ellitext_box {
position: relative;
}
.ellitext_content {
max-height: 2.8em;
overflow: hidden;
}
.ellitext_first{
padding-right: 4em;
text-indent: -4em;
white-space: pre-wrap;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: justify;
}
.ellitext_fake{
position: absolute;
white-space: pre-wrap;
top: 0;
left: 0;
z-index: 1;
background-color: #ccc;
max-height: 1.4em;
overflow: hidden;
text-align: justify;
}
.ellitext_fake_text {
position: absolute;
top: 1.4em;
right: 0;
z-index: 100;
color: blue;
}
.ellitext_realbox{
position: unset;
top: -1.4em;
left: 0;
}
.ellitext_real{
white-space: pre-wrap;
padding-right: 0;
text-indent: 0;
text-align: justify;
}
.displayNo {
display: none;
}
.displayBlock {
display: block;
}
</style>
</head>
<body>
<!-- 页面更改比例后,需要刷新下页面 -->
<div>
<div class="ellitext_outer" onclick="setHideText()">
<div class="ellitext_box">
<div class="ellitext_first"></div>
<div class="ellitext_fake"></div>
<div class="ellitext_fake_text">【详情】</div>
<div class="ellitext_realbox">
<div class="ellitext_real"></div>
</div>
</div>
</div>
</div>
</body>
<script>
var isHideContent = true
var ellitext_box = document.getElementsByClassName("ellitext_box")[0]
var ellitext_first = document.getElementsByClassName("ellitext_first")[0]
var ellitext_fake = document.getElementsByClassName("ellitext_fake")[0]
var ellitext_fake_text = document.getElementsByClassName("ellitext_fake_text")[0]
var ellitext_realbox = document.getElementsByClassName("ellitext_realbox")[0]
var ellitext_real = document.getElementsByClassName("ellitext_real")[0]
var text = "大兴区全区所有人员原则上禁止离京,如需出京,按照“谁审批谁负责”的原则,持3日内核酸检测阴性证明。自6月6日起,除丰台区全域及昌平区部分区域外,全市其他地区进一步分区分级动态实施。"
ellitext_first.innerHTML = text
ellitext_fake.innerHTML = text
ellitext_real.innerHTML = text
addOrRemoveClass()
// 是否展示“详情”按钮
if (ellitext_first.scrollHeight > ellitext_first.offsetHeight) {
//
} else {
ellitext_fake_text.style.display = 'none'
}
function setHideText () {
isHideContent = !isHideContent
addOrRemoveClass()
}
function addOrRemoveClass() {
if (isHideContent) {
ellitext_box.classList.add('ellitext_content')
ellitext_first.classList.remove('displayNo')
ellitext_fake.classList.remove('displayNo')
ellitext_fake_text.classList.remove('displayNo')
ellitext_realbox.classList.add('displayNo')
} else {
ellitext_box.classList.remove('ellitext_content')
ellitext_first.classList.add('displayNo')
ellitext_fake.classList.add('displayNo')
ellitext_fake_text.classList.add('displayNo')
ellitext_realbox.classList.remove('displayNo')
}
}
</script>
</html>
2. vue 中实现:
<template>
<div class="list-content-wrap">
<ul class="list-content">
<li class="item-wrap"
v-for="(goods, index) in filterList"
:key="goods.goodsCode">
<div>
<p class="item-name">{{goods.goodsName}}</p>
<div class="ellitext_outer">
<div class="ellitext_box" :class="{'ellitext_content':!goods.isHideContent}">
<div class="ellitext_first" :ref="setElliTestRefArr" v-show="!goods.isHideContent">{{goods.goodsDesc}}</div>
<div class="ellitext_fake" v-show="!goods.isHideContent">{{goods.goodsDesc}}</div>
<img @click.stop="setHideText(goods, index)" v-if="goods.isShowDescArrow" class="text-arrow" :src="goods.isHideContent ? iconUpImg : iconDownImg" />
<div class="ellitext_realbox" v-show="goods.isHideContent">
<div class="ellitext_real">{{goods.goodsDesc}}</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
import iconDownImg from '@/assets/img/plan-data/icon_down.png'
import iconUpImg from '@/assets/img/plan-data/icon_up.png'
import { onMounted, reactive, onBeforeUpdate, toRefs } from 'vue'
export default {
setup (props) {
const state = reactive({
elliTestRefArr: [],
filterList: [
{ goodsName: '名称1', goodsDesc: '我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;我是详情;' }
]
})
const setElliTestRefArr = (r) => {
if (!r) return
state.elliTestRefArr.push(r)
}
onBeforeUpdate(() => {
state.elliTestRefArr = []
})
onMounted(() => {
setTimeout(() => {
state.elliTestRefArr.forEach((el, index) => {
state.filterList[index].isShowDescArrow = el.scrollHeight > el.offsetHeight
})
}, 200)
})
function setHideText (goods) {
goods.isHideContent = !goods.isHideContent
}
return {
...toRefs(state),
setElliTestRefArr,
setHideText,
iconDownImg,
iconUpImg
}
}
}
</script>
<style lang="stylus" scoped>
.ellitext_outer {
text-align: left;
word-break: break-all;
background-color: #FFF;
color: #999;
font-size: .24rem;
margin-top: .26rem;
line-height: .4rem;
position: relative;
}
.ellitext_box {
position: relative;
}
.ellitext_content {
max-height: 4em;
overflow: hidden;
}
.ellitext_first{
padding-right: 1em;
text-indent: -1em;
white-space: pre-wrap;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: justify;
}
.ellitext_fake{
position: absolute;
white-space: pre-wrap;
top: 0;
left: 0;
z-index: 1;
max-height: 1.4em;
overflow: hidden;
text-align: justify;
background: #fff;
}
.text-arrow {
width: .2rem;
height: .1rem;
position: absolute;
bottom: .5em;
right: 0;
z-index: 100;
color: blue;
}
.ellitext_realbox{
position: unset;
top: -1.4em;
left: 0;
}
.ellitext_real{
white-space: pre-wrap;
padding-right: 0;
text-indent: 0;
text-align: justify;
}
.displayNo {
display: none;
}
.displayBlock {
display: block;
}
.list-content-wrap {
margin-top: .02rem;
.list-content {
background: #fff;
padding-top: .2rem;
}
.item-wrap {
display: flex;
align-items: center;
justify-content: flex-start;
padding: .3rem .26rem;
&:not(:first-of-type) {
position relative
&::before {
content: '';
display: block;
background: #f5f5f5;
height: .02rem;
width: 93%;
position: absolute;
top: 0;
}
}
.item-img {
height: 1.4rem;
width: 1.4rem;
margin-right: .26rem;
$radius(.1rem);
}
.item-name {
font-size: .32rem;
font-weight: bold;
color: #333333;
}
}
}
</style>