Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
(_灬幸福相伴
Docs
提交
4861ccdd
D
Docs
项目概览
(_灬幸福相伴
/
Docs
与 Fork 源项目一致
Fork自
OpenHarmony / Docs
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
4861ccdd
编写于
3月 26, 2022
作者:
L
LiAn
提交者:
Gitee
3月 26, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update zh-cn/application-dev/ui/ui-js-components-text.md.
Signed-off-by:
N
LiAn
<
lian15@huawei.com
>
上级
d1a4bcd5
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
173 addition
and
173 deletion
+173
-173
zh-cn/application-dev/ui/ui-js-components-text.md
zh-cn/application-dev/ui/ui-js-components-text.md
+173
-173
未找到文件。
zh-cn/application-dev/ui/ui-js-components-text.md
浏览文件 @
4861ccdd
...
...
@@ -34,198 +34,198 @@ Text是文本组件,用于呈现一段文本信息。具体用法请参考[Tex
-
添加文本样式
设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
<text style="color: blueviolet; font-size: 40px; allow-scale:true">
This is a passage
</text>
<text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" >
This is a passage
</text>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
```
![
zh-cn_image_0000001220778205
](
figures/zh-cn_image_0000001220778205.png
)
设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
<text style="color: blueviolet; font-size: 40px; allow-scale:true">
This is a passage
</text>
<text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" >
This is a passage
</text>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
```
![zh-cn_image_0000001220778205](figures/zh-cn_image_0000001220778205.png)
-
添加划线
设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色,text-decoration枚举值请参考Text自有样式。
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<text style="text-decoration:underline">
This is a passage
</text>
<text style="text-decoration:line-through;text-decoration-color: red">
This is a passage
</text>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
text{
font-size: 50px;
}
```
![
zh-cn_image_0000001220856725
](
figures/zh-cn_image_0000001220856725.png
)
设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色,text-decoration枚举值请参考Text自有样式。
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<text style="text-decoration:underline">
This is a passage
</text>
<text style="text-decoration:line-through;text-decoration-color: red">
This is a passage
</text>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
text{
font-size: 50px;
}
```
![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png)
-
隐藏文本内容
当文本内容过多而显示不全时,添加text-overflow属性将隐藏内容以省略号的形式展现。
```
<!-- xxx.hml -->
<div class="container">
<text class="text">
This is a passage
</text>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
justify-content: center;
}
.text{
width: 200px;
max-lines: 1;
text-overflow:ellipsis;
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - text-overflow样式需要与max-lines样式配套使用,设置了最大行数的情况下生效。
>
> - max-lines属性设置文本最多可以展示的行数。
![
zh-cn_image_0000001163656706
](
figures/zh-cn_image_0000001163656706.png
)
当文本内容过多而显示不全时,添加text-overflow属性将隐藏内容以省略号的形式展现。
```
<!-- xxx.hml -->
<div class="container">
<text class="text">
This is a passage
</text>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
justify-content: center;
}
.text{
width: 200px;
max-lines: 1;
text-overflow:ellipsis;
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - text-overflow样式需要与max-lines样式配套使用,设置了最大行数的情况下生效。
>
> - max-lines属性设置文本最多可以展示的行数。
![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png)
-
设置文本折行
设置word-break属性对文本内容做断行处理,word-break枚举值请参考Text自有样式。
```
<!-- xxx.hml -->
<div class="container">
<div class="content">
<text class="text1">
Welcome to the world
</text>
<text class="text2">
Welcome to the world
</text>
</div>
</div>
```
```
/* xxx.css */
.container {
background-color: #F1F3F5;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content{
width: 50%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.text1{
height: 200px;
border:1px solid #1a1919;
margin-bottom: 50px;
text-align: center;
word-break: break-word;
font-size: 40px;
}
.text2{
height: 200px;
border:1px solid #0931e8;
text-align: center;
word-break: break-all;
font-size: 40px;
}
```
![
zh-cn_image_0000001209033195
](
figures/zh-cn_image_0000001209033195.png
)
设置word-break属性对文本内容做断行处理,word-break枚举值请参考Text自有样式。
```
<!-- xxx.hml -->
<div class="container">
<div class="content">
<text class="text1">
Welcome to the world
</text>
<text class="text2">
Welcome to the world
</text>
</div>
</div>
```
```
/* xxx.css */
.container {
background-color: #F1F3F5;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content{
width: 50%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.text1{
height: 200px;
border:1px solid #1a1919;
margin-bottom: 50px;
text-align: center;
word-break: break-word;
font-size: 40px;
}
.text2{
height: 200px;
border:1px solid #0931e8;
text-align: center;
word-break: break-all;
font-size: 40px;
}
```
![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png)
-
Text组件支持
[
Span
](
../reference/arkui-js/js-components-basic-span.md
)
子组件
```
<!-- xxx.hml -->
<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5;">
<text style="font-size: 45px;">
This is a passage
</text>
<text style="font-size: 45px;">
<span style="color: aqua;">This </span><span style="color: #F1F3F5;"> 1 </span> <span style="color: blue;"> is a </span> <span style="color: #F1F3F5;"> 1 </span> <span style="color: red;"> passage </span>
</text>
</div>
```
![
zh-cn_image_0000001163372568
](
figures/zh-cn_image_0000001163372568.png
)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - 当使用Span子组件组成文本段落时,如果Span属性样式异常(例如:font-weight设置为1000),将导致文本段落显示异常。
>
> - 在使用Span子组件时,注意Text组件内不能存在文本内容,如果存在文本内容也只会显示子组件Span里的内容。
```
<!-- xxx.hml -->
<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5;">
<text style="font-size: 45px;">
This is a passage
</text>
<text style="font-size: 45px;">
<span style="color: aqua;">This </span><span style="color: #F1F3F5;"> 1 </span> <span style="color: blue;"> is a </span> <span style="color: #F1F3F5;"> 1 </span> <span style="color: red;"> passage </span>
</text>
</div>
```
![zh-cn_image_0000001163372568](figures/zh-cn_image_0000001163372568.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - 当使用Span子组件组成文本段落时,如果Span属性样式异常(例如:font-weight设置为1000),将导致文本段落显示异常。
>
> - 在使用Span子组件时,注意Text组件内不能存在文本内容,如果存在文本内容也只会显示子组件Span里的内容。
## 场景示例
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录