uniapp中text设置只有一行如何实现

在uniapp中，如何设置text组件只显示一行文本？如果文本内容超出容器宽度，希望自动截断并显示省略号（…），类似CSS的text-overflow: ellipsis效果。请问在uniapp中应该怎么实现这个效果？需要设置哪些样式属性或使用什么组件？

2 回复

在text标签中添加white-space: nowrap;样式即可实现单行显示，超出部分会被隐藏。


在 UniApp 中，可以通过 CSS 样式设置 <text> 组件只显示一行，超出部分用省略号表示。以下是实现方法：

  1. 设置 white-space: nowrap：禁止文本换行。
  2. 设置 overflow: hidden：隐藏超出部分。
  3. 设置 text-overflow: ellipsis：超出时显示省略号。
  4. 确保宽度固定：例如 width: 100% 或具体数值。

示例代码：

<text class="single-line-text">这是一段很长的文本内容，需要只显示一行，超出部分用省略号表示。</text>

.single-line-text {
  white-space: nowrap;      /* 禁止换行 */
  overflow: hidden;         /* 隐藏溢出 */
  text-overflow: ellipsis;  /* 显示省略号 */
  width: 100%;              /* 设置宽度，可根据需要调整 */
}

注意事项：

  • 确保父容器或 <text> 本身有明确的宽度限制。
  • 在 UniApp 中，<text> 组件默认是行内元素，可能需要设置为块级元素（如 display: block）以确保样式生效。

这样设置后，文本将只显示一行，超出部分自动截断并显示为 ...。

回到顶部