uni-app中，文字超出隐藏并显示省略号（实现展开、收起全文）

最新推荐文章于 2025-07-02 10:33:20 发布

原创最新推荐文章于 2025-07-02 10:33:20 发布 · 3.4w 阅读

62 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #overflow

备忘专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何在uni-app中处理文本溢出，使用CSS样式使超出部分显示为省略号，并通过Vue.js实现全文展开和收起功能。文章详细解释了代码实现过程，包括使用max-height、overflow、text-overflow属性限制文本高度和显示省略号，以及通过toggleDescription方法切换文本显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、uni-app中，固定宽高，文字超出部分，隐藏并显示省略号。
在这里插入图片描述

.topic_cont_text{
		padding: 30upx;
		colof: #999;
		background: #E1FFFF;
		max-height: 130upx;
		overflow: hidden;
		word-break: break-all;  /* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 3; /** 显示的行数 **/

	}

二、实现展开、收起全文

<view class="topic_content">
	<view class="topic_cont_text">
		<template v-if="showText">
			{{topicDetail.description}}
			<text v-if="topicDetail.description !== null && topicDetail.description.length > 140" class="full_text" @click="toggleDescription">收起</text>
		</template>
		<template v-else>
			{{topicDetail.description.substr(0, 140)}}
			<text v-if="topicDetail.description !== null && topicDetail.description.length > 140" class="full_text" @click="toggleDescription">全文</text>
		</template>
	</view>
</view>

// 全文展开收起
toggleDescription (num) {
	this.showText = !this.showText
},