text-overflow.uvue

<template>
  <view style="flex-grow: 1;">
    <view style="height: 250px;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>
  </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>