text-overflow.uvue

<template>
  <view style="flex-grow: 1;">
    <view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
      <text class="common" style="text-overflow: clip;white-space: normal;">{{text}}</text>
      <text class="common" style="text-overflow: clip;white-space: nowrap;">{{text}}</text>
      <text class="common" style="text-overflow: ellipsis;white-space: nowrap;">{{text}}</text>
    </view>
  </view>
</template>

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

<style>
  .common {
    width: 500rpx;
    height: 60rpx;
    font-size: 20px;
  }
</style>