Maison >interface Web >tutoriel CSS >Comment puis-je prioriser des emplacements de saut de ligne spécifiques en HTML sans utiliser
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:29439parcourir
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!