Comment forcer les sauts de ligne en HTML à l'aide de la classe « span.avoidwrap » ?

Création de points de saut de ligne désignés en HTML

En HTML, les sauts de ligne sont généralement déterminés par les caractères d'espacement naturels du texte (par exemple, les espaces, virgules). Cependant, pour certains scénarios, il peut être souhaitable de spécifier un endroit préféré pour un saut de ligne.

Sauts de ligne désignés avec span.avoidwrap

Pour implémenter une ligne désignée point d'arrêt, utilisez la classe span.avoidwrap. Cette classe définit les éléments span sous forme de blocs en ligne, qui sont rendus sous forme d'unités uniques plutôt que de mots séparés. En plaçant le texte souhaité dans balises, l'algorithme de retour à la ligne donnera la priorité aux sauts au début de l'élément span.

Exemple :

Considérez le code HTML suivant :

<code class="html"><table border="1" cellspacing="0" cellpadding="0">
<tr>
    <td>
        <div style="width: 180px;">
            <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    lorem ipsum
                </td>
                <td>
                    <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>
                </td>
                <td>
                    lorem ipsum
                </td>
            </tr>
            </table>
        </div>
    </td>
</tr>
</table></code>

Dans cet exemple, le texte "Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random ceramic with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks" est enveloppé dans un élément span.avoidwrap. Cela indique au navigateur qu'un saut de ligne doit être effectué au début de la période, ce qui entraînera le saut de ligne après "Rice Krispies" :

<code class="html">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</code>

Remarque : Tandis que le texte -wrap : éviter la propriété CSS fournit une fonctionnalité similaire, elle peut ne pas être prise en charge par tous les navigateurs.

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!