Home>Article>WeChat Applet> A brief analysis of how to use the text component in mini programs

A brief analysis of how to use the text component in mini programs

青灯夜游
青灯夜游 forward
2021-12-08 10:05:42 3008browse

How to use text component in mini program? The following article will introduce to you how to use the text component in the mini program. I hope it will be helpful to you!

A brief analysis of how to use the text component in mini programs

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

测试使用

A brief analysis of how to use the text component in mini programs

1. Basic style setting

The basic use is relatively simple. Let’s discuss the setting of text style. First, set a class

测试使用
for it.

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

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

A brief analysis of how to use the text component in mini programs

font-weight: Set text The thickness of the font. The value range is 100-900, value: normal: normal size is equivalent to 400. bold: bold, equivalent to 700

2. Border settings

  • border-width: Set the border width: Commonly used values: medium: default value, equivalent to 3px. thin: 1px. thick: 5px. Cannot be a negative value.

  • border-color: Set the border color.

  • border-top: Set the top border.

  • border-top-width, border-top-style, border-top-color Set the width, style and color respectively

  • border- right: Set the right border.

  • border-bottom: Set the bottom border.

  • border-left: Set the left border

  • border-radius: Set the object to use a rounded border. The value is a number or 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: 20px; /* 字体颜色 */ color: red; /* 字体风格-粗细 */ font-weight: bold; border-color: blue; border-width:3px; border-style: solid; }

A brief analysis of how to use the text component in mini programs

For example, you can also set the border rounded corners and inner and outer margins

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

A brief analysis of how to use the text component in mini programs

3. Set italic

Set it through font-style, the value is: normal normal font, italic italic, oblique oblique font.

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

A brief analysis of how to use the text component in mini programs

4. Set underline

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

text-decoration:line-through;

A brief analysis of how to use the text component in mini programs

5. Typesetting of long text paragraphs

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

A brief analysis of how to use the text component in mini programs

[Related learning Recommended:小program development tutorial

The above is the detailed content of A brief analysis of how to use the text component in mini programs. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete