Zusammenfassung der CSS-Nutzungsfähigkeiten für WeChat-Miniprogramme

CSS-Nutzungstipps für das WeChat-Miniprogramm

1: Verwenden Sie das Prinzip der Erstellung eines Dreiecks mit reinem CSS, um die obere, linke und rechte Seite auszublenden (stellen Sie die Farbe auf transparent)

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

2: Legen Sie die maximale Höhe fest. Sie können sie verschieben, nachdem Sie sie überschritten haben

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

3: text-overflow Wenn das Attribut angibt, was wann passiert der Text läuft über das enthaltende Element hinaus

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

4:overflow:hiden Wenn Sie keine Zeilenumbrüche erzwingen, verwenden Sie overflow:hidden, um den Teil auszublenden, der über die Schnittstelle hinausgeht

5: margin -bottom invalid

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

6: Kein Zeilenumbruch erzwingen

white-space:nowrap;

Automatischer Zeilenumbruch

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

Zeilenumbruch für englische Wörter erzwingen

div{
 
word-break:break-all;
 
}

Vielen Dank Zum Lesen, ich hoffe, es kann allen helfen. Vielen Dank für Ihr Interesse an der Unterstützung dieser Website!

Weitere Artikel zur Zusammenfassung der CSS-Nutzungsfähigkeiten von WeChat-Miniprogrammen finden Sie auf der chinesischen PHP-Website!