text

概述

用于展示文本，文本内容需要写在标签内容区，支持转义字符"\"。

使用限制

子组件

支持 <a>、<span> 和<image>(1100+) 子组件。

属性

支持 通用属性 。

样式

支持active伪类。除了支持 通用样式以外，还支持如下样式。

事件

支持 通用事件 。

示例代码

<template>
  <div class="container">
    <div class="page-title-wrap">
      <text class="page-title">{{componentName}}</text>
    </div>
    <div class="item-content">
      <text class="hslbgcolor">hsla background-color</text>
      <text class="item color-1">text-align:center</text>
      <text class="item1 color-1">text-align:left</text>
      <text class="item2 color-1">text-align:right</text>
    </div>

    <div class="item-content">
      <text style="font-weight: bold;">text-font-weight-bold</text>
      <text style="font-weight: bolder;">text-font-weight-bolder</text>
      <text style="font-weight: lighter;">text-font-weight-lighter</text>
      <text>text-font-weight-normal</text>
      <text style="font-weight: 300;">text-font-weight-300</text>
      <text style="font-weight: 400;">text-font-weight-400</text>
      <text style="font-weight: 500;">text-font-weight-500</text>
      <text style="font-weight: 900;">text-font-weight-900</text>
      <text><span style="font-weight: bold;">font-weight-bold</span></text>
      <text><span style="font-weight: bolder;">font-weight-bolder</span></text>
      <text><span style="font-weight: 400;">font-weight-400</span></text>
      <text><span style="font-weight: 500;">font-weight-500</span></text>
    </div>

    <div class="item-container">
      <!-- style -->
      <text class="item-title">lines: default -1</text>
      <text class="txt">This framework is a framework for application development based on the front-end development technology stack. It adopts the popular front-end development model to fit the thinking habits of mainstream front-end developers, while greatly improving the performance of the application and providing a large number of systems that cannot be used in the front-end environment. Capabilities, as well as the ability to connect with many third-party services.</text>
      <text class="item-title">lines:set as 3; text-overflow: clip</text>
      <text class="txt" style="lines: 3;">This framework is a framework for application development based on the front-end development technology stack. It adopts the popular front-end development model to fit the thinking habits of mainstream front-end developers, while greatly improving the performance of the application and providing a large number of systems that cannot be used in the front-end environment. Capabilities, as well as the ability to connect with many third-party services.</text>
      <text class="item-title">lines:set as 3; text-overflow: ellipsis</text>
      <text class="txt" style="lines: 3; text-overflow: ellipsis;">This framework is a framework for application development based on the front-end development technology stack. It adopts the popular front-end development model to fit the thinking habits of mainstream front-end developers, while greatly improving the performance of the application and providing a large number of systems that cannot be used in the front-end environment. Capabilities, as well as the ability to connect with many third-party services.</text>
      <text class="item-title">line-height:set as 50px</text>
      <text class="txt" style="line-height: 50px;">This framework is a framework for application development based on the front-end development technology stack. It adopts the popular front-end development model to fit the thinking habits of mainstream front-end developers, while greatly improving the performance of the application and providing a large number of systems that cannot be used in the front-end environment. Capabilities, as well as the ability to connect with many third-party services.</text>
      <text class="item-letterspacing" style="line-height: 50px;">letter spacing</text>
    </div>

    <div class="item-container">
      <text>abcdefghijklmn</text>
      <text style="text-indent: 100px">abcdefghijklmn</text>
      <text style="text-indent: 3cm">abcdefghijklmn</text>
      <text style="text-indent: 4em">abcdefghijklmn</text>
      <text style="text-indent: 20%">abcdefghijklmn</text>
    </div>
  </div>
</template>

<style>
    .container {
      flex: 1;
      flex-direction: column;
    }
    .page-title-wrap {
      padding-top: 50px;
      padding-bottom: 80px;
      justify-content: center;
    }
    .page-title {
      padding-top: 30px;
      padding-bottom: 30px;
      padding-left: 40px;
      padding-right: 40px;
      border-color: #bbbbbb;
      color: #bbbbbb;
      border-bottom-width: 2px;
    }
    .hslbgcolor {
      text-align: center;
      background-color: hsla(360, 50%, 50%, 0.5);
    }

    .item-container {
      margin-bottom: 50px;
      margin-right: 60px;
      margin-left: 60px;
      flex-direction: column;
    }

    .item-title {
      padding-top: 50px;
      padding-bottom: 20px;
      color: #aaaaaa;
    }

    .item-content {
      flex-direction: column;
      margin-right: 60px;
      margin-left: 60px;
    }

    .item {
      height: 150px;
      width: 550px;
      text-align: center;
    }

    .item1 {
      height: 150px;
      width: 550px;
    }

    .item2 {
      height: 150px;
      width: 550px;
      text-align: right;
    }

    .item-letterspacing {
      font-size: 30px;
      letter-spacing: 30px;
    }

    .color-1 {
      background-color: #09ba07;
    }
</style>

<script>
    export default {
        data: {
            componentName: 'text'
        },
        onInit() {
            this.$page.setTitleBar({ text: 'text' })
        }
    }
</script>

效果图如下：

版本更新说明

相关链接

[h2]FAQ

• 调大系统字体后，应用字体随之变大，部分text组件出现了换行现象，如何处理？
• text组件支持换行符吗？
• 快应用样式支持文字过多时自动显示“...”吗？

[h2]案例

如何在一段文字的开始位置设置背景色