关于小程序:uniapp开发小程序判断文本是否有溢出

最近开发小程序遇到须要通过文本长度管制 tooltip 展现
css 设置文字在元素中不够宽度显示为…
并且同时能够展现气泡 (前提是气泡是自定义的款式),
文字够宽度，则不显示气泡。并且追随手机屏幕宽度变动。

小程序如何监听和实现呢？

效果图展现

解决办法：

1. 溢出暗藏 css 款式

.hide {
    word-break: break-word; // 换行模式
    overflow: hidden;
    text-overflow: ellipsis; // 修剪文字，超过 2 行显示省略号
    display: -webkit-box;
    -webkit-line-clamp: 2; // 此处为下限行数
    -webkit-box-orient: vertical;
}

2. 获取到文本离页面顶部的间隔

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();

3. 残缺代码

<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>

有用关注下哦~😯