Comment puis-je prioriser des emplacements de saut de ligne spécifiques en HTML sans utiliser <wbr> ou des espaces insécables ?-tutoriel CSS-php.cn

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

Susan Sarandon

Libérer： 2024-10-27 04:06:29

original

452 Les gens l'ont consulté

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>

Copier après la connexion

Enveloppez le texte à conserver ensemble dans cette classe :
```
<code class="html"><span class="avoidwrap">Text to keep together</span></code>
```
Copier après la connexion

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>

Copier après la connexion

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!