recherche

Maison  >  Article  >  interface Web  >  Comment définir le retour à la ligne automatique CSS

Comment définir le retour à la ligne automatique CSS

coldplay.xixi
coldplay.xixioriginal
2021-03-02 10:52:5012119parcourir

Comment configurer un saut de ligne automatique CSS : utilisez l'attribut [word-break] pour permettre au navigateur de couper des lignes à n'importe quelle position. Le code est [.p3{width:200px;border:1px solid #. ccc;word-break: break-all].

Comment définir le retour à la ligne automatique CSS

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

Comment définir le retour à la ligne automatique CSS :

attribut de retour à la ligne automatique L'utilisation de l'attribut word-break permet au navigateur de renvoyer à la ligne les lignes à n'importe quel endroit

<.> Il a trois valeurs d'attribut :

  •  : le comportement de saut de ligne par défaut dans le navigateur normal

  •  : permet la ligne sauts de ligne dans les mots break-all

  •  : les sauts de ligne ne peuvent être effectués qu'au niveau des espaces ou des tirets à mi-largeur keep-all

Exemple : 

<style>
.p1{
width:200px;
border:1px solid #ccc;
word-break:normal;
}
 
.p2{
width:200px;
border:1px solid #ccc;
word-break:keep-all;
}
 
.p3{width:200px;
border:1px solid #ccc;
word-break:break-all;
}
</style>
</head>
<body>
<p class="p1">Php Chinese website provides a large number of free, original, 
high-definition php video tutorials.</p>
<p class="p2">Php Chinese website provides a large   number of free, 
original, high-definition php video tutorials.</p>
<p class="p3">Php Chinese website provides a large number of free, original,
 high-definition php video tutorials.</p>
</body>

Rendu :

Comment définir le retour à la ligne automatique CSS

Recommandations de didacticiel associées :

Tutoriel vidéo CSS

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!

html5 css css3 break border word
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment empêcher div de s'emballer en CSSArticle suivant：Comment empêcher div de s'emballer en CSS

Articles Liés

Voir plus