小程式中怎麼使用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 正常的字體,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文字元件的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

Atom編輯器mac版下載
最受歡迎的的開源編輯器

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

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具

Dreamweaver CS6
視覺化網頁開發工具

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