推荐|HarmonyOS Next开发学习手册——基础组件(text开发）

text是文本组件，用于呈现一段文本信息。

创建text组件

在pages/index目录下的hml文件中创建一个text组件。



  Hello World

/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}

设置text组件样式和属性

添加文本样式

设置color、font-size、allow-scale、word-spacing、text-align属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在水平方向的对齐方式。


   
   
    This is a passage
  
  
    This is a passage

/* xxx.css */
.container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}

添加划线

设置text-decoration和text-decoration-color属性为文本添加划线和划线颜色，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;
}

隐藏文本内容

当文本内容过多而显示不全时，添加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;
}

说明：

text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。
max-lines属性设置文本最多可以展示的行数。

设置文本断行

设置word-break属性对文本内容做断行处理，word-break枚举值请参考text自有样式。



  
    
      Welcome to the world
    
      
        Welcome to the world

/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  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{
  width: 100%;
  height: 200px;
  border:1px solid #1a1919;
  margin-bottom: 50px;
  text-align: center;
  word-break: break-word;
  font-size: 40px;
}
.text2{
  width: 100%;
  height: 200px;
  border:1px solid #0931e8;
  text-align: center;
  word-break: break-all;
  font-size: 40px;
}

text组件支持 Span 子组件



  
    This is a passage
  
  
    This       1       
       
     is a           1        
      passage

说明

当使用Span子组件组成文本段落时，如果Span属性样式异常（例如：font-weight设置为1000），将导致文本段落显示异常。
在使用Span子组件时，注意text组件内不能存在文本内容，如果存在文本内容也只会显示子组件Span里的内容。

场景示例

text组件通过数据绑定展示文本内容，Span组件通过设置show属性来实现文本内容的隐藏和显示。



  
    
      {{ content }}
    
    
  
  
      {{ content  }}  
    
        1
    
    Hide clip

/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: #F1F3F5;
}
.title {
  font-size: 26px;
  text-align:center;
  width: 200px;
  height: 200px;
}

// xxx.js
export default {   
  data: {    
    isShow:true,    
    content: 'Hello World'
  },   
  onInit(){    },  
  test(e) {    
    this.isShow = e.checked  
  }
}

鸿蒙全栈开发全新学习指南

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以要有一份实用的鸿蒙（HarmonyOS NEXT）学习路线与学习文档用来跟着学习是非常有必要的。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。