同步操作将从 OpenHarmony/docs 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
文本,用于呈现一段信息。
说明: 文本的展示内容需要写在元素标签内。
无
支持<span>。
支持通用属性。
除支持通用样式外,还支持如下样式:
|
||||
|
||||
|
||||
|
||||
设置文本的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。 |
||||
预设的字号集合,在动态尺寸调整时,优先使用预设字号集合中的字号匹配设置的最大行数,如果预设字号集合未设置,则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况,使用text-overflow设置项进行截断,设置预设尺寸集后,font-size、max-font-size、min-font-size和font-size-step不生效。 |
||||
|
||||
|
||||
说明:
- 字体动态缩放:预设尺寸集合和最小最大字号调节基于是否满足最大行数要求,预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求,最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。
- 文本换行:文本可以通过转义字符\r\n进行换行。
- 文本标签内支持以下转义字符:\a,\b,\f,\n,\r,\t,\v,\',\",\0。
- 当使用子组件span组成文本段落时,如果span属性样式异常,将导致text段落无法显示。
- letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件(span)组成的文本内容。
- text组件说明:不支持text内同时存在文本内容和span子组件。(如果同时存在,只显示span内的内容)
支持通用事件。
支持通用方法。
<!-- xxx.hml -->
<div class="container">
<div class="content">
<text class="title">
Hello {{ title }}
</text>
</div>
</div>
/* xxx.css */
.container {
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 400px;
height: 400px;
border: 20px;
border-image-source: url("/common/images/landscape.jpg");
border-image-slice: 20px;
border-image-width: 30px;
border-image-outset: 10px;
border-image-repeat: round;
}
.title {
font-size: 80px;
text-align: center;
width: 400px;
height: 400px;
}
// xxx.js
export default {
data: {
title: 'World'
}
}
<!-- xxx.hml -->
<div class="container">
<text class="text1">
This is a passage
</text>
<text class="text2">
This is a passage
</text>
</div>
/* xxx.css */
.container {
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
justify-content: center;
}
.text1{
word-spacing: 10px;
adapt-height: true;
}
.text2{
width: 200px;
max-lines: 1;
text-overflow: ellipsis;
text-valign: middle;
line-height: 40px;
text-decoration: underline;
text-decoration-color: red;
text-indent: 20px;
white-space: pre;
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。