搜尋
首頁微信小程式小程式開發淺析小程式中text文字元件的使用方法

小程式中怎麼使用text文字元件?以下這篇文章跟大家介紹一下小程式中text文字元件的使用方法,希望對大家有幫助!

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

在微信小程式中,元件text 用來顯示文本,基本上使用程式碼如下:

<text >测试使用</text>

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

1、基本樣式設定

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

<text class="text">测试使用</text>

然後在對應的wxss 檔案中編寫樣式,對於字體來說常用的就是字體大小、顏色、粗細的配置

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

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

#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文字元件的使用方法

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

.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;

}

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

3、設定斜體

透過font-style來設置,取值:normal 正常的字體,it​​alic   斜體字,   oblique  傾斜的字體。

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

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

4、設定底線

/*下划线*/
text-decoration:underline;   
/*删除线*/
text-decoration:line-through;

text-decoration:line-through;

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

5、長文本段落的排版

#
.text2 {
  /*段落排版--首字缩进*/
  text-indent: 2em;
  /*段落排版--行间距(行高)*/
  line-height: 1.5em;
  /*段落排版--中文字间距*/
  letter-spacing: 1px;
  /*字母间距*/
  word-spacing: 4px;
  /*文字对齐 right 、left 、center  */
  text-align: left;
}

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

【相關學習推薦:小程式開發教學

以上是淺析小程式中text文字元件的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:掘金社区。如有侵權,請聯絡admin@php.cn刪除

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),