Summary of CSS usage skills in WeChat mini programs

This article introduces a summary of the CSS usage skills in the recently popular WeChat mini program. Students in need can refer to this article

WeChat mini program CSS usage skills

1: Use pure CSS to create a triangle and hide the top, left and right sides (set the color to transparent)

.demo {
 
width:0;
 
height:0;
 
border-width:20px;
 
border-style:solid;
 
border-color:transparenttransparentredtransparent;
 
}

2: Settings Maximum height..You can slide after exceeding it

#

max-height:550rpx;
 
overflow-y:scroll;

##3: text-overflow Occurs when the attribute specifies that text overflows the containing element matter

clip: Trim text

ellipsis: Use ellipsis to represent the trimmed text

string: Use the given string to represent the trimmed text

The key point is to use three at the same time: text-overflow:ellipsis;white-space:nowrap;overflow:hidden;

# #4:overflow: hidden When forcing no line breaks, use overflow:hidden to hide the part beyond the interface

5: margin-bottom is invalid

##margin-bottom is below Margins cannot move elements downward, and margin-top serves as the top margin to "push" elements down.

If you want the icon to be 30px from the bottom, you can set position:absolute,bottom:30px on ul. (I did not add this sentence to achieve the same effect) In addition, the parent element position:relative

6: Force no line breaks

##white-space:nowrap;##Automatic line wrapping

##

p{
 
word-wrap: break-word;
 
word-break:normal;
 
}

##Force English word line breaking

p{
 
word-break:break-all;
 
}

The above is the detailed content of Summary of CSS usage skills in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!