Comment résoudre le problème d’affichage des pages de longs mots anglais en CSS ?

En bref

Dans la mise en page, les longs mots anglais débordent souvent du conteneur de paragraphes. Comment résoudre ce problème ? Le programme de démonstration de comparaison suivant est maintenant compilé :

Programme de démonstration

Programme de démonstration en ligne 42du.cn

Partie du code html

<div class="block">    <h4>word-break:break-all;</h4>    <p class="break-all">Extraordinarily longlong word!</p></div>
CSS代码
 .break-all {    word-break: break-all;}.break-word {    word-wrap: break-word;}.hyphens {    word-wrap: break-word;    -webkit-hyphens: auto;    -ms-hyphens: auto;    hyphens: auto;}

Problèmes

Lors de la composition de paragraphes anglais, nous rencontrons souvent de longs mots anglais. Généralement, par défaut, si un mot est composé à la limite du conteneur, le mot sera automatiquement déplacé vers la ligne suivante pour être affiché. Et si la longueur d’un seul mot est supérieure à la largeur du conteneur, il dépassera les limites du conteneur. Voir la première partie de la démonstration dans l'article, Extraordinairement, la longueur de la page dépasse les limites du conteneur.

Quand il s'agit de sauts de ligne de mots en CSS, les sauts de mots et les retours à la ligne viennent naturellement à l'esprit. Les différences spécifiques peuvent être constatées dans la comparaison entre la deuxième et la troisième partie de la démonstration.

word-break: break-all;

La déclaration ci-dessus, comme indiqué dans la deuxième partie de la démo. Lorsque le format de mot atteint la limite du conteneur, le mot sera divisé en deux parties et cette dernière partie sera déplacée vers la ligne suivante pour être affichée. Cette mise en page rend le côté droit du paragraphe soigné et j'aime l'effet. Cependant, le break-all entraînera la rupture de nombreux mots à la fin de la ligne, affectant l'expérience de lecture.

word-wrap: break-word;

La déclaration ci-dessus, comme indiqué dans la troisième partie de la démo. Lorsque le format de mot atteint la limite du conteneur, le mot est déplacé vers la ligne suivante pour être affiché en premier. Lorsque la longueur du mot dépasse la largeur de la ligne, les mots sont interrompus. Autrement dit, la déconnexion en ligne est prioritaire et lorsque la déconnexion en ligne ne fonctionne pas, la déconnexion par mot est utilisée. De cette façon, le côté droit du paragraphe de composition n'est pas assez net et il y a un espace blanc, mais cela n'entraînera pas la rupture ou le débordement d'un grand nombre de mots.

tirets : auto;

La déclaration ci-dessus, comme indiqué dans la quatrième partie de la démo. Si vous allez plus loin et souhaitez ajouter un trait d'union (-) aux mots brisés, vous pouvez utiliser des traits d'union : auto. Cependant, la compatibilité de cette déclaration est actuellement très mauvaise.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Les 20 expressions régulières les plus couramment utilisées en JavaScript

Comment résoudre le problème inter-domaines d'ajax

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!