Comment indiquer les points d'arrêt préférés pour le retour à la ligne en HTML sans utiliser d'espaces insécables ?

Indiquant les points d'arrêt préférés pour le retour à la ligne

En HTML, les sauts de ligne se produisent généralement au niveau des espaces ou des tirets. Cependant, dans certains cas, les développeurs peuvent souhaiter spécifier des points d'arrêt préférés pour une ligne, même s'il n'y a pas d'espace ou de tiret à cet emplacement spécifique.

Considérez la situation suivante : une cellule de tableau contient une longue liste de noms de céréales qui doivent être placés de préférence après les virgules. Cependant, l'utilisation d'espaces insécables pour éviter les coupures indésirables peut entraîner un élargissement indésirable de la colonne.

Solution suggérée :

Au lieu d'utiliser des espaces insécables, nous peut utiliser des éléments de bloc en ligne pour obtenir le résultat souhaité. En enveloppant les points d'arrêt préférés dans un élément avec la classe CSS "avoidwrap", nous pouvons empêcher les sauts de ligne de se produire à l'intérieur de ces blocs.

Exemple :

<code class="html"><span class="avoidwrap">Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks</span></code>

<code class="css">span.avoidwrap {
  display: inline-block;
}</code>

Cette approche permet ligne à couper de préférence après les virgules dans la zone éléments. Cependant, si la ligne doit être enveloppée davantage, elle sera interrompue après les espaces dans les fragments plus petits.

Remarque :

Le text-wrap CSS3 : éviter le comportement fournit fonctionnalité similaire. Cependant, il est important de vérifier la prise en charge du navigateur avant de l'utiliser dans des environnements de production.

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!