Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
559d9ad7
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3600
Star
108
Fork
921
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
120
列表
看板
标记
里程碑
合并请求
109
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
120
Issue
120
列表
看板
标记
里程碑
合并请求
109
合并请求
109
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
559d9ad7
编写于
1月 17, 2023
作者:
Anne_LXM
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update text.md
上级
9867a6db
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
106 addition
and
106 deletion
+106
-106
docs/component/text.md
docs/component/text.md
+106
-106
未找到文件。
docs/component/text.md
浏览文件 @
559d9ad7
#### text
文本组件。
用于包裹文本内容。
**属性说明**
|属性名 |类型 |默认值 |说明 |平台差异说明 |
|:-|:- |:- |:- |:- |
:- |
|selectable |Boolean|false |文本是否可选 |
App、H5、快手小程序 |
|user-select |Boolean|false |文本是否可选 | 微信小程序 |
|space |String | |显示连续空格 |
App、H5、微信小程序 |
|decode |Boolean|false |是否解码 |
App、H5、微信小程序 |
**space 值说明**
|值|说明|
|:-|:-|
|ensp|中文字符空格一半大小|
|emsp|中文字符空格大小|
|nbsp|根据字体设置的空格大小|
**Tips**
-
`<text>`
组件内只支持嵌套
`<text>`
,不支持其它组件或自定义组件,否则会引发在不同平台的渲染差异。
-
在app-nvue下,只有
`<text>`
才能包裹文本内容。无法在
`<view>`
组件包裹文本。
-
decode 可以解析的有
` `
`<`
`>`
`&`
`'`
` `
` `
。
-
各个操作系统的空格标准并不一致。
-
除了文本节点以外的其他节点都无法长按选中。
-
支持
`\n`
方式换行。
-
如果使用
`<span>`
组件编译时会被转换为
`<text>`
。
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/text/text
)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
::: preview https://hellouniapp.dcloud.net.cn/pages/component/text/text
> Template
```
vue
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<
template
>
<view>
<view
class=
"uni-padding-wrap uni-common-mt"
>
<view
class=
"text-box"
scroll-y=
"true"
>
<text>
{{
text
}}
</text>
</view>
<view
class=
"uni-btn-v"
>
<button
type=
"primary"
:disabled=
"!canAdd"
@
click=
"add"
>
add line
</button>
<button
type=
"warn"
:disabled=
"!canRemove"
@
click=
"remove"
>
remove line
</button>
</view>
</view>
</view>
</
template
>
```
> Script
```
vue
<
script
>
export
default
{
data
()
{
return
{
texts
:
[
'
HBuilder,500万开发者选择的IDE
'
,
'
MUI,轻巧、漂亮的前端开源框架
'
,
'
wap2app,M站快速转换原生体验的App
'
,
'
5+Runtime,为HTML5插上原生的翅膀
'
,
'
HBuilderX,轻巧、极速,极客编辑器
'
,
'
uni-app,终极跨平台方案
'
,
'
HBuilder,500万开发者选择的IDE
'
,
'
MUI,轻巧、漂亮的前端开源框架
'
,
'
wap2app,M站快速转换原生体验的App
'
,
'
5+Runtime,为HTML5插上原生的翅膀
'
,
'
HBuilderX,轻巧、极速,极客编辑器
'
,
'
uni-app,终极跨平台方案
'
,
'
......
'
],
text
:
''
,
canAdd
:
true
,
canRemove
:
false
,
extraLine
:
[]
}
},
methods
:
{
add
:
function
(
e
)
{
this
.
extraLine
.
push
(
this
.
texts
[
this
.
extraLine
.
length
%
12
]);
this
.
text
=
this
.
extraLine
.
join
(
'
\n
'
);
this
.
canAdd
=
this
.
extraLine
.
length
<
12
;
this
.
canRemove
=
this
.
extraLine
.
length
>
0
;
},
remove
:
function
(
e
)
{
if
(
this
.
extraLine
.
length
>
0
)
{
this
.
extraLine
.
pop
();
this
.
text
=
this
.
extraLine
.
join
(
'
\n
'
);
this
.
canAdd
=
this
.
extraLine
.
length
<
12
;
this
.
canRemove
=
this
.
extraLine
.
length
>
0
;
}
}
}
}
</
script
>
```
:::
**注意事项**
-
nvue 样式
`word-wrap`
在 Android 平台暂不支持
#### text
文本组件。
用于包裹文本内容。
**属性说明**
|属性名 |类型 |默认值 |说明 |平台差异说明 |
|:-|:- |:- |:- |:- |
|selectable |Boolean|false |文本是否可选 |
|
|user-select |Boolean|false |文本是否可选 | 微信小程序 |
|space |String | |显示连续空格 |
钉钉小程序不支持 |
|decode |Boolean|false |是否解码 |
百度、钉钉小程序不支持 |
**space 值说明**
|值|说明|
|:-|:-|
|ensp|中文字符空格一半大小|
|emsp|中文字符空格大小|
|nbsp|根据字体设置的空格大小|
**Tips**
-
`<text>`
组件内只支持嵌套
`<text>`
,不支持其它组件或自定义组件,否则会引发在不同平台的渲染差异。
-
在app-nvue下,只有
`<text>`
才能包裹文本内容。无法在
`<view>`
组件包裹文本。
-
decode 可以解析的有
` `
`<`
`>`
`&`
`'`
` `
` `
。
-
各个操作系统的空格标准并不一致。
-
除了文本节点以外的其他节点都无法长按选中。
-
支持
`\n`
方式换行。
-
如果使用
`<span>`
组件编译时会被转换为
`<text>`
。
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/text/text
)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
::: preview https://hellouniapp.dcloud.net.cn/pages/component/text/text
> Template
```
vue
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<
template
>
<view>
<view
class=
"uni-padding-wrap uni-common-mt"
>
<view
class=
"text-box"
scroll-y=
"true"
>
<text>
{{
text
}}
</text>
</view>
<view
class=
"uni-btn-v"
>
<button
type=
"primary"
:disabled=
"!canAdd"
@
click=
"add"
>
add line
</button>
<button
type=
"warn"
:disabled=
"!canRemove"
@
click=
"remove"
>
remove line
</button>
</view>
</view>
</view>
</
template
>
```
> Script
```
vue
<
script
>
export
default
{
data
()
{
return
{
texts
:
[
'
HBuilder,500万开发者选择的IDE
'
,
'
MUI,轻巧、漂亮的前端开源框架
'
,
'
wap2app,M站快速转换原生体验的App
'
,
'
5+Runtime,为HTML5插上原生的翅膀
'
,
'
HBuilderX,轻巧、极速,极客编辑器
'
,
'
uni-app,终极跨平台方案
'
,
'
HBuilder,500万开发者选择的IDE
'
,
'
MUI,轻巧、漂亮的前端开源框架
'
,
'
wap2app,M站快速转换原生体验的App
'
,
'
5+Runtime,为HTML5插上原生的翅膀
'
,
'
HBuilderX,轻巧、极速,极客编辑器
'
,
'
uni-app,终极跨平台方案
'
,
'
......
'
],
text
:
''
,
canAdd
:
true
,
canRemove
:
false
,
extraLine
:
[]
}
},
methods
:
{
add
:
function
(
e
)
{
this
.
extraLine
.
push
(
this
.
texts
[
this
.
extraLine
.
length
%
12
]);
this
.
text
=
this
.
extraLine
.
join
(
'
\n
'
);
this
.
canAdd
=
this
.
extraLine
.
length
<
12
;
this
.
canRemove
=
this
.
extraLine
.
length
>
0
;
},
remove
:
function
(
e
)
{
if
(
this
.
extraLine
.
length
>
0
)
{
this
.
extraLine
.
pop
();
this
.
text
=
this
.
extraLine
.
join
(
'
\n
'
);
this
.
canAdd
=
this
.
extraLine
.
length
<
12
;
this
.
canRemove
=
this
.
extraLine
.
length
>
0
;
}
}
}
}
</
script
>
```
:::
**注意事项**
-
nvue 样式
`word-wrap`
在 Android 平台暂不支持
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录