uniapp小程序判断文本是否有溢出_uniappcss文字超出一行隐藏

最近开发小程序遇到需要通过文本长度控制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;
}
1
2
3
4
5
6
7
8

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();
1
2
3
4
5
6
7
8
9
10

完整代码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173

有用关注下呗~