Résumé des compétences d'utilisation du CSS dans les mini-programmes WeChat

Cet article présente un résumé des compétences d'utilisation CSS dans le mini programme WeChat récemment populaire. Les étudiants dans le besoin peuvent se référer à cet article

Compétences d'utilisation CSS du mini programme WeChat

<.>1 : Utilisez du CSS pur pour créer un triangle et masquer les côtés supérieur, gauche et droit (définissez la couleur sur transparent)

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

2 : Réglez la hauteur maximale.. Vous pouvez glisser après l'avoir dépassée

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

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

3 : texte L'attribut -overflow spécifie ce qui se passe lorsque le texte déborde de l'élément conteneur

clip: 修剪文本

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

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

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

clip : couper le texte

points de suspension : utiliser des points de suspension pour représenter le texte coupé

chaîne : utilisez la chaîne donnée pour représenter le texte coupé

Le point clé est d'en utiliser trois en même temps : text-overflow:ellipsis; :hidden;

4:overflow: Hidden Lorsque vous ne forcez aucun saut de ligne, utilisez overflow: Hidden hides la partie au-delà de l'interface

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

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

5 : la marge inférieure échoue

la marge inférieure est en dessous de la marge extérieure ne permet pas à l'élément de se déplacer vers le bas et la marge supérieure sert de marge supérieure pour "pousser" l'élément vers le bas.

white-space:nowrap;

Si vous souhaitez que l'icône soit à 30px du bas, vous pouvez définir position:absolute,bottom:30px sur ul (je n'ai pas ajouté cette phrase pour obtenir le même effet) De plus, l'élément parent. position:relative

6 : Ne forcer aucun saut de ligne

p{
 
word-break:break-all;
 
}

white-space:nowrap;

Enveloppement automatique Forcer les sauts de ligne dans les mots anglais

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!