Shulou(Shulou.com)06/02 Report--

Editor to share with you how to use the text text component in Mini Program. I hope you will get something after reading this article. Let's discuss it together.

In WeChat Mini Programs, the component text is used to display text. The basic code is as follows:

Test use

1. Basic style settings

The basic use is relatively simple. Let's discuss the setting of the text style. The first thing is to set a class for him.

Test use

Then write the style in the corresponding wxss file, and what is commonly used for fonts is the configuration of font size, color and weight.

.text {/ * font size * / font-size: 20px; / * font color * / color: red; / * font style-weight * / font-weight: bold;}

Font-weight: sets the weight of the text font. Value range: 100-900. value: mormal: the normal size is equivalent to 400. Bold: bold, equivalent to 700

2. Border setting

Border-width: set border width: common values: medium: default value, equivalent to 3px. Thin:1px . Thick:5px . Cannot be negative.

Border-color: sets the border color.

Border-top: sets the top border.

Border-top-width,border-top-style,border-top-color sets width, style, and color respectively.

Border-right: sets the right border.

Border-bottom: sets the bottom border.

Border-left: set the left border

Border-radius: sets the object to use a fillet border. The value is a number or a percentage.

Border-style (border style) common styles are: (border-color,border-width) border related settings

Dashed (dashed line) | dotted (dotted line) | solid (solid line).

.text {/ * font size * / font-size: 20px; / * font color * / color: red; / * font style-weight * / font-weight: bold; border-color: blue; border-width:3px; border-style: solid;}

For example, you can also set the border fillet and the inner and outer margin.

.text {/ * font size * / font-size: 20px; / * font color * / color: red; / * font style-weight * / font-weight: bold; border-color: blue; border-width:3px; border-style: solid; / * inner margin * / padding: 10px; / * outer margin * / margin: 10px / * set the border fillet from left to right * / / * upper left corner, upper right corner, lower right corner * / border-radius: 2px 4px 10px 20px;}

3. Set italics

Set through font-style. Values: normal normal font, italic italic font, oblique slanted font.

.text2 {/ * text typesetting-italic * / font-style:italic;}

4. Set the underline

/ * underscore * / text-decoration:underline; / * delete line * / text-decoration:line-through

Text-decoration:line-through

5. Typesetting of long paragraphs of text

.text2 {/ * paragraph typesetting-headline indentation * / text-indent: 2mm; / * paragraph typesetting-line spacing (line height) * / line-height: 1.5mm; / * paragraph typesetting-Chinese character spacing * / letter-spacing: 1px; / * letter spacing * / word-spacing: 4px; / * text alignment right, left, center * / text-align: left } after reading this article, I believe you have some understanding of "how to use text text components in Mini Program". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.