diff --git a/zh-cn/application-dev/ui/ui-js-components-text.md b/zh-cn/application-dev/ui/ui-js-components-text.md index ed62fcf89144793cd7eba5b4baf44c2803e67c9b..96dfb5a196b80a0cf9f24d836bb71c8668159927 100644 --- a/zh-cn/application-dev/ui/ui-js-components-text.md +++ b/zh-cn/application-dev/ui/ui-js-components-text.md @@ -34,198 +34,198 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex - 添加文本样式 -设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。 - - -``` - -
- - This is a passage - - - This is a passage - -
-``` - - -``` -/* 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属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。 + + + ``` + +
+ + This is a passage + + + This is a passage + +
+ ``` + + + ``` + /* 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自有样式。 - - -``` - -
- - This is a passage - - - This is a passage - -
-``` - - -``` -/* 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自有样式。 + + + ``` + +
+ + This is a passage + + + This is a passage + +
+ ``` + + + ``` + /* 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属性将隐藏内容以省略号的形式展现。 - - -``` - -
- - This is a passage - -
-``` - - -``` -/* 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属性将隐藏内容以省略号的形式展现。 + + + ``` + +
+ + This is a passage + +
+ ``` + + + ``` + /* 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自有样式。 - - -``` - -
-
- - Welcome to the world - - - Welcome to the world - -
-
-``` - - -``` -/* 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自有样式。 + + + ``` + +
+
+ + Welcome to the world + + + Welcome to the world + +
+
+ ``` + + + ``` + /* 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)子组件 - -``` - -
- - This is a passage - - - This 1 is a 1 passage - -
-``` - - -![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里的内容。 - + + ``` + +
+ + This is a passage + + + This 1 is a 1 passage + +
+ ``` + + + ![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里的内容。 + ## 场景示例