Maison > Article > interface Web > Comment puis-je prioriser des emplacements de saut de ligne spécifiques en HTML sans utiliser ou des espaces insécables ?

Comment puis-je prioriser des emplacements de saut de ligne spécifiques en HTML sans utiliser ou des espaces insécables ?

Susan Sarandonoriginal: 2024-10-27 04:06:29365parcourir

How can I prioritize specific line break locations in HTML without using <wbr> ou espaces insécables ? ou des espaces insécables ? " />

Désignation des emplacements de saut de ligne préférés

En HTML, les sauts de ligne se produisent généralement au niveau des espaces ou des virgules. Cependant, dans les situations où vous souhaitez forcer un saut de ligne à un emplacement spécifique, il existe une technique pour prioriser les sauts de ligne préférés.

Pour désigner un emplacement de saut de ligne préféré sans utiliser d'espaces insécables, vous pouvez utiliser l'approche suivante :

Définissez une classe CSS :

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

Enveloppez le texte à conserver ensemble dans cette classe :

<code class="html"><span class="avoidwrap">Text to keep together</span></code>

Ceci La méthode définit le texte enveloppé comme un bloc en ligne, l'empêchant de s'interrompre dans ses propres limites. L'algorithme de retour à la ligne tentera d'abord de s'interrompre aux emplacements préférés spécifiés (par exemple, les virgules) avant de prendre en compte les espaces dans le bloc en ligne. 🎜>

Par exemple, l'extrait de code suivant :

<code class="html"><html>
  <head>
    <style type="text/css">
      span.avoidwrap {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <table>
        <tr>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
        </tr>
        <tr>
          <td>lorem ipsum</td>
          <td>
            <span class="avoidwrap">Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies</span>
            <br />
            <span class="avoidwrap">Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K</span>
            <br />
            <span class="avoidwrap">Froot Loops, Apple Jacks</span>
          </td>
          <td>lorem ipsum</td>
        </tr>
      </table>
    </div>
  </body>
</html></code>

Entraînera des sauts de ligne aux emplacements de virgules désignés, en gardant ensemble le texte dans chaque bloc en ligne.

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!

css html define for break using class this location

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 créer un mixin d'espace réservé dans SCSS/CSS qui fonctionne avec les deux-points et les points-virgules ?Article suivant：Comment créer un mixin d'espace réservé dans SCSS/CSS qui fonctionne avec les deux-points et les points-virgules ?

Articles Liés

Voir plus