uniapp九宫格文字显示两行

admin 2026年02月13日 01:52 103 0

在uniapp中实现九宫格文字显示两行，可通过CSS布局与文本溢出处理完成，首先使用grid布局设置3列等宽格子，每个格子设置固定宽高（如width: 33.33%; height: 100px），文字容器需设置display: -webkit-box、-webkit-line-clamp: 2（限制两行）、-webkit-box-orient: vertical（垂直排列）及text-overflow: ellipsis（超出省略号），同时确保overflow: hidden，搭配text-align: center居中文字，padding调整间距，最终实现九宫格整齐排列，文字自动换行显示两行，超出部分以省略号呈现，提升界面美观性与信息展示效率。

Uniapp九宫格文字两行显示：实现方法与优化技巧

在Uniapp开发过程中，九宫格布局是常见的UI形式，广泛应用于功能菜单、商品分类、导航入口等场景，当格子内文字较长时，经常会出现显示不全、换行混乱等问题，本文将详细介绍如何实现九宫格文字限制显示两行，并处理超长文字的省略效果,同时兼顾多端兼容性。

常见问题：九宫格文字显示的痛点

九宫格通常通过flex或grid布局实现，每个格子（view容器）内包含文字内容，在实际开发中,常见问题包括：

文字超出隐藏：长文字直接溢出格子边界,破坏整体布局美观性；
换行混乱：默认自动换行可能导致行数不固定（1行、3行不等）,影响视觉统一性；
省略号失效：单行省略（text-overflow: ellipsis）无法满足多行文本的截断需求。

核心方案：CSS实现文字两行显示+省略

要实现文字固定两行并在超长时显示省略号，核心是通过CSS的-webkit-line-clamp属性（Webkit内核浏览器及小程序普遍支持）,以下是具体实现步骤：

九宫格布局基础

使用flex布局搭建九宫格结构，每个格子设置固定宽高（或自适应）,并确保文字容器能正确换行。

示例代码（template部分）：

<template>
  <view class="container">
    <view class="grid">
      <view class="grid-item" v-for="(item, index) in gridList" :key="index">
        <text class="item-text">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

样式（style部分）：

.container {
  padding: 20rpx;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.grid-item {
  width: 33.33%; /* 三列布局 */
  height: 120rpx; /* 固定高度，确保两行文字空间 */
  box-sizing: border-box;
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1rpx solid #eee;
}
.item-text {
  font-size: 28rpx;
  color: #333;
  text-align: center;
  /* 关键样式：两行显示+省略 */
}

实现文字两行省略的核心CSS

在.item-text上添加以下样式，实现两行显示、超长省略：

.item-text {
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp: 2; /* 显示的行数，超过部分省略 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 用省略号表示被隐藏的文本 */
  line-height: 1.4; /* 行高，确保两行文字高度合适 */
}