text-overflow

# text-overflow

text-overflow CSS 属性用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串。

# uni-app x 兼容性

Web	Android	iOS	HarmonyOS
4.0	3.9	4.11	4.61

# 语法

text-overflow: [ clip | ellipsis | <string> ]{1,2};

示例源码如下，请查看 pre > code 标签中的内容

text-overflow: [ clip | ellipsis | <string> ]{1,2};

# 值限制

enum

# text-overflow 的属性值

名称

兼容性

描述

clip

默认值。这个关键字会在内容区域的极限处截断文本，因此可能会在单词的中间发生截断。如果你的目标浏览器支持 text-overflow: ''，为了能在两个单词过渡处截断，你可以使用一个空字符串值（''）作为 text-overflow 属性的值。

ellipsis

这个关键字会用一个省略号（'…'、U+2026 HORIZONTAL ELLIPSIS）来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小以至于连省略号都容纳不下，那么这个省略号也会被截断。

# 默认值

clip

# 适用组件

text
button

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

示例

<template>
  <view style="flex-grow: 1;">
    <view style="height: 500px;padding: 0 30px; background-color: gray;justify-content: center;">
      <view class="margin-bottom-10">
        <text class="font-weight-bold">text-overflow:clip white-space:nowrap</text>
        <text class="font-size-20" style="text-overflow: clip;white-space: nowrap;">{{multiLineText}}</text>
      </view>
      <view class="margin-bottom-10">
        <text class="font-weight-bold">text-overflow:ellipsis white-space:nowrap</text>
        <text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;">{{singleLineText}}</text>
        <text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;">{{multiLineText}}</text>
      </view>
      <view class="margin-bottom-10">
        <text class="font-weight-bold">white-space:normal</text>
        <text class="font-size-20" style="white-space: normal;">{{multiLineText}}</text>
      </view>
      <view class="margin-bottom-10" style="overflow: visible;">
        <text class="font-weight-bold">white-space: nowrap</text>
        <text class="font-size-20" style="white-space: nowrap;align-self: flex-start;">{{multiLineText}}</text>
      </view>
      <view class="margin-bottom-10">
        <text class="font-weight-bold">任意宽度截断（100px、200px、300px）</text>
        <text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;width: 100px;">{{multiLineText}}</text>
        <text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;width: 200px;">{{multiLineText}}</text>
        <text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;width: 300px;">{{multiLineText}}</text>
      </view>
      <!-- #ifdef APP -->
      <view class="margin-bottom-10">
        <text class="font-weight-bold">lines:1 text-overflow:ellipsis</text>
        <text class="font-size-20" style="text-overflow: ellipsis; lines: 1;">{{multiLineText}}</text>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        multiLineText: 'HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言',
        singleLineText: 'uts，大一统语言（单行文本）'
      }
    }
  }
</script>

<style>
  .font-size-20 {
    font-size: 20px;
  }

  .font-weight-bold {
    font-weight: bold;
  }

  .margin-bottom-10 {
    margin-bottom: 10px;
  }
</style>

示例源码如下，请查看 pre > code 标签中的内容

<template>
  <view style="flex-grow: 1;">
    <view style="height: 500px;padding: 0 30px; background-color: gray;justify-content: center;">
      <view class="margin-bottom-10">
        <text class="font-weight-bold">text-overflow:clip white-space:nowrap</text>
        <text class="font-size-20" style="text-overflow: clip;white-space: nowrap;">{{multiLineText}}</text>
      </view>
      <view class="margin-bottom-10">
        <text class="font-weight-bold">text-overflow:ellipsis white-space:nowrap</text>
        <text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;">{{singleLineText}}</text>
        <text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;">{{multiLineText}}</text>
      </view>
      <view class="margin-bottom-10">
        <text class="font-weight-bold">white-space:normal</text>
        <text class="font-size-20" style="white-space: normal;">{{multiLineText}}</text>
      </view>
      <view class="margin-bottom-10" style="overflow: visible;">
        <text class="font-weight-bold">white-space: nowrap</text>
        <text class="font-size-20" style="white-space: nowrap;align-self: flex-start;">{{multiLineText}}</text>
      </view>
      <view class="margin-bottom-10">
        <text class="font-weight-bold">任意宽度截断（100px、200px、300px）</text>
        <text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;width: 100px;">{{multiLineText}}</text>
        <text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;width: 200px;">{{multiLineText}}</text>
        <text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;width: 300px;">{{multiLineText}}</text>
      </view>
      <!-- #ifdef APP -->
      <view class="margin-bottom-10">
        <text class="font-weight-bold">lines:1 text-overflow:ellipsis</text>
        <text class="font-size-20" style="text-overflow: ellipsis; lines: 1;">{{multiLineText}}</text>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        multiLineText: 'HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言',
        singleLineText: 'uts，大一统语言（单行文本）'
      }
    }
  }
</script>

<style>
  .font-size-20 {
    font-size: 20px;
  }

  .font-weight-bold {
    font-weight: bold;
  }

  .margin-bottom-10 {
    margin-bottom: 10px;
  }
</style>