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

高青網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,高青網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為高青超過(guò)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的高青做網(wǎng)站的公司定做！

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

<text >測(cè)試使用</text>

1、基本樣式設(shè)置

基本使用還是比較簡(jiǎn)單的，下面咱們來(lái)論述一下文本樣式的設(shè)置，首先是給他設(shè)置一個(gè) class

<text class="text">測(cè)試使用</text>

然后在對(duì)應(yīng)的 wxss 文件中編寫樣式，對(duì)于字體來(lái)說(shuō) 常用的就是字體大小、顏色、粗細(xì)的配置

.text {
  /* 字體大小 */
  font-size: 20px;
  /* 字體顏色 */
  color: red;
  /* 字體風(fēng)格-粗細(xì) */
  font-weight: bold;
}

font-weight：設(shè)置文本字體的粗細(xì)。取值范圍為100-900,取值：mormal：正常大小相當(dāng)于400。bold :粗體，相當(dāng)于700

2、邊框設(shè)置

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

• border-color:設(shè)置邊框顏色。

• border-top:設(shè)置頂部邊框。

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

• border-right：設(shè)置右邊框。

• border-bottom：設(shè)置底邊框。

• border-left：設(shè)置左邊框

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

• border-style（邊框樣式）常見(jiàn)樣式有： （border-color,border-width） 邊框相關(guān)設(shè)置
  dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）。

.text {
  /* 字體大小 */
  font-size: 20px;
  /* 字體顏色 */
  color: red;
  /* 字體風(fēng)格-粗細(xì) */
  font-weight: bold;

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

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

.text {
  /* 字體大小 */
  font-size: 20px;
  /* 字體顏色 */
  color: red;
  /* 字體風(fēng)格-粗細(xì) */
  font-weight: bold;

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

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

}

3、設(shè)置斜體

通過(guò)font-style來(lái)設(shè)置，取值：normal 正常的字體， italic   斜體字，   oblique  傾斜的字體。

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

4、設(shè)置下劃線

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

text-decoration:line-through;

5、長(zhǎng)文本段落的排版

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

看完了這篇文章，相信你對(duì)“小程序中text文本組件怎么用”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站標(biāo)題：小程序中text文本組件怎么用
分享URL：http://jinyejixie.com/article46/psijhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、微信小程序、App設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司、云服務(wù)器、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)