淺析小程式中text文字元件的使用方法

小程式中怎麼使用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：設定邊框寬度：常用取值：medium：預設值，相當於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：設定物件使用圓角邊框。取值為數字或百分比。

• 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;
  
}

例如也可以設定一下邊框圓角以及內外邊距

.text {
  /* 字体大小 */
  font-size: 20px;
  /* 字体颜色 */
  color: red;
  /* 字体风格-粗细 */
  font-weight: bold;

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

  
  /* 内边距 */
  padding: 10px;
  /* 外边距 */
  margin: 10px ;
  /* 设置边框圆角 从左向右 */
  /* 左上角 右上角 右下角 左下角 */
  border-radius: 2px 4px 10px 20px;

}

3、設定斜體

透過font-style來設置，取值：normal 正常的字體，it​​alic   斜體字，   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文字元件的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！