Summary of CSS usage skills for WeChat mini programs

WeChat applet css usage tips

1: Use the principle of creating a triangle using pure CSS to 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: transparent transparent red transparent;
 
}

2: Set the maximum height.. You can slide it after exceeding it

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

3: text-overflow When the attribute specifies what happens when the text overflows the containing element

clip: 修剪文本
ellipsis : 用省略号来代表被修剪的文字
string: 使用给定的字符串来代表被修剪的文字
重点是三个同时使用：text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

4:overflow: hiddenWhen forced not to wrap, use overflow:hidden to hide the part beyond the interface

5: margin-bottom is invalid

margin-bottom是下方的外边距，并不能让元素向下方移动，margin-top作为上边距，把元素“推”了下去。
希望图标距离下方30px，那么可以在ul上设置 position:absolute, bottom:30px ，(这一句我没有加同样实现了效果)另外父元素position:relative

6: Force no line wrapping

white-space:nowrap;

##Automatic line wrapping

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

Forcing English word line breaks

div{
 
word-break:break-all;
 
}

Thank you for reading, I hope it can help everyone, thank you for your support of this site!

For more articles related to the summary of CSS usage skills of WeChat mini programs, please pay attention to the PHP Chinese website!