最近开发小程序遇到须要通过文本长度管制tooltip展现
css设置文字在元素中不够宽度显示为…
并且同时能够展现气泡(前提是气泡是自定义的款式),
文字够宽度，则不显示气泡。并且追随手机屏幕宽度变动。
小程序如何监听和实现呢？
效果图展现
解决办法：
- 溢出暗藏css款式
.hide { word-break: break-word; //换行模式 overflow: hidden; text-overflow: ellipsis; //修剪文字，超过2行显示省略号 display: -webkit-box; -webkit-line-clamp: 2; //此处为下限行数 -webkit-box-orient: vertical;}- 获取到文本离页面顶部的间隔
let query = wx. createSelectorQuery() .in(this); query .select('.toll-station-name-en').boundingClientRect(data => { console.log("节点离页面顶部的间隔为" + data.height); if (data.height > 40) {//管制你文本展现的最大高度 this.enOverflow = true } }).exec();- 残缺代码
<template> <view class="detail-content"> <view class="block"></view> <view class="content"> <view class="park-lot"> <view class="toll-station" style="margin-right: 30rpx;"> <view class="toll-station-name toll-station-name-en" :class="{hide:enOverflow}" :style="{height:(exOverflow&&!enOverflow?'40px':'auto')}" @click.stop="showEn()" ref="enStation">{{detail.enStation}}</view> <view class="tooltip" v-if="showToolTipEn"> {{detail.enStation}} </view> </view> <image src="../../static/to.png" mode="" class="to"></image> <view class="toll-station" style="margin-left: 30rpx;"> <view class="toll-station-name toll-station-name-ex" :class="{hide:exOverflow}" :style="{height:(enOverflow&&!exOverflow?'40px':'')}" @click.stop="showEx()"> {{detail.exStation}} </view> <view class="tooltip" v-if="showToolTipEx"> {{detail.exStation}} </view> </view> </view> </view> </view></template><script> export default { data() { return { detail: { enStation: '我不暗藏', exStation: '我暗藏啦我暗藏啦我暗藏啦我暗藏啦我暗藏啦我暗藏啦' }, showToolTipEn: false, showToolTipEx: false, enOverflow: false, //是否溢出 exOverflow: false, //是否溢出 } }, onLoad() { this.judgmentOverflow() }, methods: { judgmentOverflow() { let query = wx. createSelectorQuery() .in(this); query .select('.toll-station-name-en').boundingClientRect(data => { console.log("节点离页面顶部的间隔为" + data.height); if (data.height > 40) { this.enOverflow = true } }).exec(); query .select('.toll-station-name-ex').boundingClientRect(data => { console.log("节点离页面顶部的间隔为" + data.height); if (data.height > 40) { this.exOverflow = true } }).exec(); }, showEn() { if (!this.enOverflow) { return } this.showToolTipEn = !this.showToolTipEn }, showEx() { if (!this.exOverflow) { return } this.showToolTipEx = !this.showToolTipEx }, } }</script><style lang="scss" scoped> .detail-content { .content { width: calc(100% - 60rpx); margin: 0 30rpx 0; background-color: #fff; border-radius: 10rpx; height: 1018rpx; .park-lot { display: flex; padding-top: 60rpx; margin: 0 30rpx; .toll-station { width: 40%; text-align: center; position: relative; .toll-station-name { min-height: 39rpx; // max-height: 78rpx; // height: auto; font-size: 32rpx; font-weight: 500; color: #333333; line-height: 20px; } .hide { word-break: break-word; //换行模式 overflow: hidden; text-overflow: ellipsis; //修剪文字，超过2行显示省略号 display: -webkit-box; -webkit-line-clamp: 2; //此处为下限行数 -webkit-box-orient: vertical; } //气泡提示框 .tooltip { width: 120px; height: auto; background: #000000; opacity: 0.69; padding: 8px; position: relative; font-size: 13px; border-radius: 6px; font-weight: 400; color: #FFFFFF; line-height: 15px; position: absolute; top: 95rpx; left: 0; z-index: 999; } .tooltip::before { content: ''; width: 0; height: 0; border-width: 8px; border-color: transparent transparent #000 transparent; border-style: dashed dashed solid dashed; position: absolute; top: -16px; left: 45%; } } .to { width: 67rpx; height: 18rpx; margin-top: 26rpx; background-size: 100%; } } } }</style>有用关注下哦~