Quelles sont les principales propriétés des paramètres de texte CSS ?

Les principaux attributs des paramètres de texte CSS sont : font-famil, font-size, color, text-align, text-decoration, border, text-shadow, Word-warp, Word-break, direction, etc. .

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Une collection de divers attributs de texte CSS

1. Attributs de police

• font-family : 'Microsoft Yahei' Spécifie le style de paramètre d'attribut CSS de la police

• font-size : Définit la taille de la police.

• font-weight : Définissez l'épaisseur du texte.

• font-style : Définissez l'inclinaison de la police. Les attributs possibles sont normal, italique, et oblique ;

• line-height : définit l'espacement des lignes de la police

• color font color

2. Attributs de texte

• text-align : Contrôler l'alignement du texte

• text-indent : Contrôlez la première ligne de texte L'indentation peut être px ou %;

• white-space : l'espace vide dans le document

  valeur de l'attribut :

  • noraml : par défaut, plusieurs espaces sont ignorés et un seul espace est affiché.

  • nowrap : ne force aucun saut de ligne

  • pre : espaces/indentation / Les sauts de ligne seront conservés

  • pre-line : fusionner les tables vides (plusieurs espaces ne produiront qu'un seul espace)

  • pré-déformation : conserver les espaces/indentations, retour à la ligne normal

• espacement des lettres : contrôler la distance entre les lettres ; 🎜>

text-overflow : Que se passe-t-il lorsque le texte déborde de l'élément conteneur ;

• Valeur de l'attribut :
  clip Trim texte.
  ellipse Affiche des ellipses pour représenter le texte coupé.
  string Utilisez la chaîne donnée pour représenter le texte coupé.

espacement des mots : contrôlez la distance des espaces entre les mots, utilisez des espaces pour distinguer les mots, le chinois et l'anglais sont OK
3. Attribut de soulignement

text-decoration : Contrôle si le texte est souligné. Les valeurs possibles sont

aucune. sans soulignement

• overline définit une ligne sur le texte.

• line-through définit une ligne qui passe sous le texte.

• soulignement définit une ligne sous le texte.
4. Convertir le cas

text-transform :

Valeur de l'attribut :

aucun (par défaut) aucune conversion ;

• majuscule : la première lettre de chaque mot est en majuscule

• majuscule : conversion en majuscule ; ;

• minuscule : en minuscules;

• [Tutoriel recommandé :

  Tutoriel vidéo CSS
]

5. Attributs de bordure

6. Ombre de boîte

box-shadow : ombre de boîte

peut avoir cinq valeurs (ombre horizontale h-shadow ; position, position de l'ombre verticale de l'ombre en V, distance du flou, taille de l'ombre étendue, couleur, ombre intérieure et extérieure en incrustation/déport)

par exemple :

box-shadow: 10px 5px 10px red inset;

7. Le texte dépasse la nouvelle ligne

• Déformation de mots : autoriser la transition des mots longs vers la ligne suivante

• Mot -break : Autoriser les sauts de ligne dans les mots (retour à la ligne automatique)

8. Formulaire de placement de texte

direction : direction de placement du texte

valeur de l'attribut :

• ltl : de gauche à droite

• rtl : de droite à gauche

9. Le texte dépasse le saut de ligne

• Déformation de mots : permet de convertir les mots longs à la ligne suivante

• Saut de mot : autoriser la modification des lignes dans les mots (retour automatique à la ligne)

10. Ombre de texte

• text-shadow : Ombre de la boîte de référence

11. Lorsqu'une seule ligne de texte dépasse les ellipses d'affichage

{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

<. 🎜>

12. Lorsque le texte multiligne dépasse la limite, utilisez des points de suspension au lieu du nombre limite de lignes

{
  overflow:hidden;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*限制在一个块元素显示的文本的行数*/
  -webkit-box-orient: vertical;
  text-overflow:ellipsis;
}

Pour plus de connaissances sur la programmation, veuillez visiter :

Vidéo de programmation ! !

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!