uniapp小程序判断文本是否有溢出

你个布拿拿

已于 2023-02-28 16:30:24 修改

阅读量1.1k

点赞数 1

分类专栏：小程序 vue 前端文章标签： uni-app 小程序 javascript

于 2023-02-28 16:14:57 首次发布

本文链接：https://blog.csdn.net/weixin_42650105/article/details/129263560

版权

vue 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

小程序

2 篇文章 0 订阅

订阅专栏

该文章介绍了一种在小程序中处理文本溢出的方法，使用CSS样式隐藏超出部分并显示省略号。当文本内容超过设定的宽度时，会显示自定义样式的tooltip气泡。同时，代码示例展示了如何监听和调整以适应手机屏幕宽度变化。

摘要由CSDN通过智能技术生成

最近开发小程序遇到需要通过文本长度控制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>

有用关注下呗~😍