也許你迷茫，但是我想說，在你迷茫的同時，保持本心，過好今天就好。
在微信小程序中，組件 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：設置對象使用圓角邊框。取值為數(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;
}
例如還可以設置一下邊框圓角以及內外邊距
.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;
}
當然也可以給4個角單獨的設置：
- 左上角：border-top-left-radius
- 右上角：border-top-right-radius
- 左下角：border-bottom-left-radius
- 右下角：border-bottom-right-radius
3 設置斜體
通過font-style來設置，取值：normal 正常的字體， italic 斜體字， oblique 傾斜的字體。
.text2{
/*文字排版--斜體*/
font-style:italic;
}
4 設置下劃線
下劃線
text-decoration:underline;
中間刪除線
text-decoration:line-through;
文章來源：http://www.zghlxwxcb.cn/news/detail-412487.html
5 長文本段落的排版
.text2 {
/*段落排版--首字縮進*/
text-indent: 2em;
/*段落排版--行間距（行高）*/
line-height: 1.5em;
/*段落排版--中文字間距*/
letter-spacing: 1px;
/*字母間距*/
word-spacing: 4px;
/*文字對齊 right 、left 、center */
text-align: left;
}
文章來源地址http://www.zghlxwxcb.cn/news/detail-412487.html
到了這里，關于微信小程序文本組件text使用詳解-微信小程序系統(tǒng)學習攻略?的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
