文本

<text>

说明

展示文字的组件；行内元素 inline，不可以设置宽度高度等；相当于HTML5的 <span>

其子元素只能是自己

支持文本缩进 text-indent

小程序支持的14种字体

更多信息，请查看官方文档 Text

通用属性
属性	说明
user-select	布尔；默认false；文本是否可选；长按复制；仅限文本组件

WebView 特有属性
属性	说明
space	空格；根据字体设置的空格大小
decode	实体符号解码；非常鸡肋数量非常有限；  < > & ' &ensp; &emsp; Skyline模式支持更多实体

Skyline 特有属性
属性	说明
overflow	溢出特性；常用打点 ellipsis
max-lines	数字；限制文本最大行数

版权信息

微信小程序的实体不支持版权符号 ©；可以利用输入法或从其它地方直接复制过来

后期会封装为组件，便于重复使用

<text>all copyright reserved © 2022-2024</text>

渲染结果

all copyright reserved © 2022-2024

单行文字打点

传统的三件套

直接块元素或者通过布局可以隐式的转换为块元素

部分场景下，需要父容器也要设置溢出隐藏

.wrap{
    overflow: hidden;
}
.txt{
    // 1
    overflow: hidden;
    // 2
    text-overflow: ellipsis;
    // 3
    white-space: nowrap;
}

Skyline模式

版权信息

<text>all copyright reserved &commat; 2024</text>

多行文字打点

<text overflow='ellipsis' max-lines='5'>lorem100...</text>

富文本 rich-text

原生标签仅支持少量HTML5属性

更多支持，请使用第三方插件WxParse；基本使用请参照微信小程序之富文本解析

基本步骤

下载 WxParse

拷贝WxParse文件夹至小程序项目中并引入；为了减少提交，可以删除其中的emojis表情文件夹

<import src="../../utils/wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

@import "../../utils/wxParse/wxParse.wxss";

语法1 - 局部使用

onLoad(option) {
    let WxParse = require('../../utils/wxParse/wxParse.js')
    let article = '<div>我是HTML代码</div>'
    let that = this;
    WxParse.wxParse('article', 'html', article, that, 5);
}

语法2 - 全局使用

WxParse : require('../../utils/wxParse/wxParse.js'),
article : '<div>我是HTML代码</div>',
onLoad(option) {
    let that = this;
    this.WxParse.wxParse('article', 'html', this.article, that, 5);
}