1. 页面展示和css样式
<p class="intro-text"
id="introduction"
:class="{'show-three-row':!showAll}">
{{ dataDetail.abstract }}
</p>
<el-button v-if="showButton" class="load-btn" @click="showAll = !showAll">
{{ showAll ? 'Collapse' : 'Expand' }}
</el-button>
.show-three-row {
white-space: unset;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
2. 文字渲染页面调用checkOverflow
function checkOverflow() {
const element = document.getElementById('introduction')
showButton.value = element.scrollHeight > element.clientHeight;
}
在这里,element.scrollHeight 表示元素内容的总高度,包括因溢出而无法看到的部分。而 element.clientHeight 则表示元素的可见高度。
因此,条件 element.scrollHeight > element.clientHeight 意味着如果元素的内容高度大于元素自身可见的高度,则说明内容被截断(即发生了溢出)。在这种情况下,我们需要显示“Expand”按钮来允许用户展开文本内容。