Zusammenfassung der CSS-Nutzungsfähigkeiten in WeChat-Miniprogrammen

In diesem Artikel wird eine Zusammenfassung der CSS-Nutzungsfähigkeiten im kürzlich beliebten WeChat-Miniprogramm vorgestellt. Bedürftige Schüler können sich auf diesen Artikel beziehen

CSS-Nutzungsfähigkeiten im WeChat-Miniprogramm

1: Verwenden Sie reines CSS, um ein Dreieck zu erstellen und 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:transparenttransparentredtransparent;
 
}

2: Stellen Sie die maximale Höhe ein. Sie können nach Überschreiten rutschen

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

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

3: text Das Attribut -overflow gibt an, was passiert, wenn Text über das enthaltende Element

clip: 修剪文本

ellipsis : 用省略号来代表被修剪的文字

string: 使用给定的字符串来代表被修剪的文字

重点是三个同时使用：text-overflow:ellipsis;white-space:nowrap;overflow:hidden;

clip: Text zuschneiden

ellipse: Ellipsen verwenden, um die darzustellen getrimmter Text string: Verwenden Sie den angegebenen String, um den getrimmten Text darzustellen

Der entscheidende Punkt ist die gleichzeitige Verwendung von drei: text-overflow:ellipsis; overflow; :hidden;

4:overflow: versteckt Wenn Sie keine Zeilenumbrüche erzwingen möchten, verwenden Sie overflow: versteckt der Teil jenseits der Schnittstelle

margin-bottom是下方的外边距，并不能让元素向下方移动，margin-top作为上边距，把元素“推”了下去。

希望图标距离下方30px，那么可以在ul上设置position:absolute,bottom:30px，(这一句我没有加同样实现了效果)另外父元素position:relative

5: margin-bottom schlägt fehl

white-space:nowrap;

margin-bottom liegt unter dem Der äußere Rand verhindert, dass sich das Element nach unten bewegt, und margin-top dient als oberer Rand, um das Element nach unten zu „drücken“.

Wenn Sie möchten, dass das Symbol 30 Pixel von unten entfernt ist, können Sie position:absolute,bottom:30px auf ul festlegen. (Ich habe diesen Satz nicht hinzugefügt, um den gleichen Effekt zu erzielen.) Außerdem das übergeordnete Element position:relative

6: Keine Zeilenumbrüche erzwingen

p{
 
word-break:break-all;
 
}

white-space:nowrap;

Automatischer Umbruch Zeilenumbrüche in englischen Wörtern erzwingen

Das obige ist der detaillierte Inhalt vonZusammenfassung der CSS-Nutzungsfähigkeiten in WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!