Comment contrôler les sauts de ligne dans les tableaux HTML lorsque vous en avez besoin à des points spécifiques ?

Sauts de ligne préférés en HTML

La création de contenu Web implique souvent l'affichage de texte dans des tableaux, où les sauts de ligne sont nécessaires pour empêcher le contenu de déborder. Cependant, il peut y avoir une préférence pour que les sauts de ligne se produisent à des points spécifiques.

Désignation des points d'arrêt préférés

Dans l'exemple fourni, une cellule de tableau contient une liste de céréales séparées par des virgules. Le comportement souhaité est que les sauts de ligne se produisent après les virgules, avant les espaces. Cependant, HTML ne fournit pas nativement un moyen de spécifier les points d'arrêt préférés.

Éviter les espaces insécables

L'insertion d'espaces insécables peut forcer le saut de ligne. à un point précis, mais cela augmente également la largeur du texte de manière inconditionnelle. Pour éviter cela, une approche alternative est nécessaire.

Propriété Text-Wrap

CSS3 a introduit la propriété text-wrap, qui permet de contrôler les sauts de ligne dans le texte. Cependant, les tentatives d'utilisation de text-wrap: évitent se sont révélées infructueuses dans l'exemple.

Inline Block Display

Au lieu de cela, la propriété display: inline-block peut être utilisée dans en conjonction avec un élément wrapper. Cela crée effectivement un « bloc » de texte dans la cellule qui peut s'enrouler indépendamment du texte environnant.

Exemple

Pour implémenter le comportement souhaité, les CSS et Le HTML peut être utilisé :

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

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

Effet

En utilisant la classe évitewrap, les noms de céréales sont conservés ensemble et des sauts de ligne se produisent au niveau des virgules, comme souhaité. Si la ligne doit être davantage enveloppée, les noms des céréales se briseront alors au niveau des espaces.

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!