Summary of CSS usage skills for WeChat mini programs-Mini Program Development-php.cn

Summary of CSS usage skills for WeChat mini programs

高洛峰

Release： 2017-01-10 10:27:54

Original

1460 people have browsed it

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

Copy after login

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

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

Copy after login

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;

Copy after login

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

Copy after login

6: Force no line wrapping

white-space:nowrap;

Copy after login

##Automatic line wrapping

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

Copy after login

Forcing English word line breaks

div{
 
word-break:break-all;
 
}

Copy after login

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!