大家好，欢迎来到IT知识分享网。
思路：
1、父元素中两个有相同内容的子元素，一个设置超出行数… ，另一个正常展示但是通过定位的方式在父元素中隐藏；
2、在组件创建完成之后，获取两个元素信息，通过比较高度来设置是否展示更多按钮
3、通过按钮点击设置元素的 -webkit-line-clamp 属性达成隐藏和展示效果
以下是组件代码(vue)
<template> <view class="text-content"> <view class="showBox" :style="{ '-webkit-line-clamp': isShowMore ? 9999 : maxLine }">{
{ text }}</view> <view class="hideBox">{
{ text }}</view> <view v-if="showMore" class="button" @click="switchMore">{
{ isShowMore ? '收起' : '展开' }}</view> </view> </template> <script> export default { options: { virtualHost: true }, props: { text: { type: String, default: '' }, maxLine: { type: Number, default: 5 } }, data() { return { showMore: false, // 是否展示更多 isShowMore: false // 展示状态 }; }, methods: { initHeight() { const query = uni.createSelectorQuery().in(this) query.selectAll(".showBox, .hideBox").boundingClientRect(res => { console.log('initHeight', res) if (res[0].height < res[1].height) { this.showMore = true } }).exec() }, switchMore() { this.isShowMore = !this.isShowMore } }, mounted() { this.initHeight() } }; </script> <style scoped> .text-content { position: relative; background-color: #fff; font-size: 30rpx; overflow: hidden; } .text-content .showBox { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; } .text-content .hideBox { position: absolute; top: 0; left: 0; z-index: -1; } .text-content .button { text-align: right; color: var(--color-primary); } </style> H5可以通过 document.getElementById 获取元素宽高来设置，简单demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
position: relative;
width: 300px;
border: 1px solid #000;
overflow: hidden;
background-color: #fff;
padding: 4px;
font-size: 15px;
}
#showText {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
}
#hideText {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.button {
display: block;
text-align: right;
color: blue;
cursor: pointer;
user-select: none;
}
</style>
</head>
<body>
<div id="box">
<span id="showText">多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行多行文字多行文字多行文字多行文字多</span>
<span id="hideText">多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行多行文字多行文字多行文字多行文字多</span>
<span class="button" onclick="toggleMore()">展开</span>
</div>
<script>
const button = document.getElementsByClassName('button')[0]
let isShow = false
function checkHide() {
const showText = document.getElementById('showText')
const hideText = document.getElementById('hideText')
if (showText.offsetHeight < hideText.offsetHeight) {
button.display = 'block'
button.innerText = '展开'
} else {
button.display = 'none'
}
}
function toggleMore() {
button.innerText = button.innerText == '展开' ? '收起' : '展开'
isShow = !isShow
if (isShow) {
showText.style['-webkit-line-clamp'] = 999
} else {
showText.style['-webkit-line-clamp'] = 3
}
}
checkHide()
</script>
</body>
</html>免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/116832.html
