Home > Web Front-end > CSS Tutorial > Summary of CSS usage skills in WeChat mini programs

Summary of CSS usage skills in WeChat mini programs

不言
Release: 2018-03-30 14:16:42
Original
3559 people have browsed it

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;
 
}
Copy after login

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



#
max-height:550rpx;
 
overflow-y:scroll;
Copy after login


##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;
 
}
Copy after login


##Force English word line breaking

p{
 
word-break:break-all;
 
}
Copy after login


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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template