小程序中text文本組件怎么用

小編給大家分享一下小程序中text文本組件怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

在微信小程序中，組件 text 用來顯示文本，基本使用代碼如下：

<text >測試使用</text>

1、基本樣式設置

基本使用還是比較簡單的，下面咱們來論述一下文本樣式的設置，首先是給他設置一個 class

<text class="text">測試使用</text>

然后在對應的 wxss 文件中編寫樣式，對于字體來說 常用的就是字體大小、顏色、粗細的配置

.text {
  /* 字體大小 */
  font-size: 20px;
  /* 字體顏色 */
  color: red;
  /* 字體風格-粗細 */
  font-weight: bold;
}

font-weight：設置文本字體的粗細。取值范圍為100-900,取值：mormal：正常大小相當于400。bold :粗體，相當于700

2、邊框設置

• border-width：設置邊框?qū)挾龋撼Ｓ萌≈担簃edium：默認值，相當于3px。thin：1px。thick：5px。不可以為負值。

• border-color:設置邊框顏色。

• border-top:設置頂部邊框。

• border-top-width,border-top-style,border-top-color 分別設置 寬度，樣式以及顏色

• border-right：設置右邊框。

• border-bottom：設置底邊框。

• border-left：設置左邊框

• border-radius：設置對象使用圓角邊框。取值為數(shù)字或者百分比。

• border-style（邊框樣式）常見樣式有： （border-color,border-width） 邊框相關設置
  dashed（虛線）| dotted（點線）| solid（實線）。

.text {
  /* 字體大小 */
  font-size: 20px;
  /* 字體顏色 */
  color: red;
  /* 字體風格-粗細 */
  font-weight: bold;

  border-color: blue;
  border-width:3px;
  border-style: solid;
  
}

例如還可以設置一下邊框圓角以及內(nèi)外邊距

.text {
  /* 字體大小 */
  font-size: 20px;
  /* 字體顏色 */
  color: red;
  /* 字體風格-粗細 */
  font-weight: bold;

  border-color: blue;
  border-width:3px;
  border-style: solid;

  
  /* 內(nèi)邊距 */
  padding: 10px;
  /* 外邊距 */
  margin: 10px ;
  /* 設置邊框圓角 從左向右 */
  /* 左上角 右上角 右下角 左下角 */
  border-radius: 2px 4px 10px 20px;

}

3、設置斜體

通過font-style來設置，取值：normal 正常的字體， italic   斜體字，   oblique  傾斜的字體。

.text2{
/*文字排版--斜體*/
font-style:italic;
}

4、設置下劃線

/*下劃線*/
text-decoration:underline;   
/*刪除線*/
text-decoration:line-through;

text-decoration:line-through;

5、長文本段落的排版

.text2 {
  /*段落排版--首字縮進*/
  text-indent: 2em;
  /*段落排版--行間距（行高）*/
  line-height: 1.5em;
  /*段落排版--中文字間距*/
  letter-spacing: 1px;
  /*字母間距*/
  word-spacing: 4px;
  /*文字對齊 right 、left 、center  */
  text-align: left;
}

看完了這篇文章，相信你對“小程序中text文本組件怎么用”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！