Comment gérer le débordement CSS et les sauts de ligne-tutoriel CSS-php.cn

Comment gérer le débordement CSS et les sauts de ligne

零下一度

Libérer： 2017-05-03 15:48:45

original

2906 Les gens l'ont consulté

1. Traitement des débordements

1, traitement des blancs

Lorsque le texte est trop long et ne peut pas être affiché dans le conteneur, que ce soit pour envelopper la ligne

Attributs : espace blanc : normal / nowrap

normal : Utiliser les paramètres par défaut du navigateur

nowrap : Pas de sauts de ligne

2, débordement de texte

Comment gérer le débordement,Si vous le souhaitez pour masquer le contenu de débordement, pensez à utiliser cet attribut.

Remarque : Cet attribut doit être utilisé en conjonction avec overflow:hidden

Attribut : text-overflow

Valeurs :

1, clip , couper, intercepter

2, points de suspension, utilisez ... (points de suspension) pour représenter le contenu non affiché

Par exemple :

<!DOCTYPE html >
<head>
  <title>文本格式</title>
  <meta charset="utf-8" />
   <style>
     p{
        width:150px;
height:50px;
border:1px solid black;
overflow:hidden;
}
#d1{
       white-space:normal;
   text-overflow:ellipsis;
}
#d2{
       white-space:nowrap;
   text-overflow:clip;
}
#d3{
       white-space:nowrap;
   text-overflow:ellipsis;
}
   </style>
</head>
<body>
   <p id="d1">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p><br/>
   <p id="d2">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p><br/>
   <p id="d3">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p>
</body>
</html>

Copier après la connexion

deux, saut de ligne

Remarque : valable uniquement pour l'anglais

1 , retour à la ligne long

W> Break-word :

La structure de la destruction des mots

, changement de texte

word-break:

value prend la valeur ： normal：

break-all:

casser le mot structurer et briser la ligne

garder tout :