Comment dépasser les sauts de ligne en CSS

Dans la conception et le développement de sites Web, un problème courant est l'adaptation de texte ou d'images à un conteneur d'une certaine largeur. Dans la plupart des cas, ces éléments rétréciront ou s'étireront automatiquement pour s'adapter à la largeur de leur conteneur parent. Cependant, lorsque le contenu d'un élément dépasse la largeur de son conteneur parent, vous devez utiliser la propriété "overflow-wrap" en CSS.

La fonction du retour à la ligne au-delà est d'implémenter un retour à la ligne automatique forcé dans un conteneur de largeur spécifiée lorsque le contenu de l'élément n'est pas lisible ou complet, rendant le contenu plus beau et plus facile à lire.

Il existe deux valeurs d'attribut pour au-delà du saut de ligne : "normal" et "break-word". Leurs différences sont les suivantes :

1. normal

Par défaut, le texte de l'élément sera automatiquement renvoyé à la ligne pour s'adapter. la largeur de la taille de son conteneur. Dans ce cas, le texte est coupé aux limites des mots, préservant ainsi l'intégrité des espaces avant et après.

2. break-word

Si l'attribut break-word est défini, le texte sera interrompu à n'importe quelle lettre ou chiffre, forçant le retour à la ligne du mot. Il s'agit d'une propriété très utile, surtout si vous souhaitez vous assurer que certains mots longs ou le contenu d'une URL ne dépassent pas la portée du conteneur.

Ce qui suit utilisera quelques exemples pour démontrer comment réaliser au-delà du retour à la ligne.

1. Réaliser un retour à la ligne de mots longs

Ce qui suit est un paragraphe avec un mot long, qui ne dépasse pas la limite de largeur du conteneur :

<p>
   pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
</p>

Lorsque la largeur du conteneur est petite, le texte ne sera pas renvoyé à la ligne. automatiquement. Afin de résoudre ce problème, nous utilisons l'attribut de retour à la ligne dépassé :

<p style="overflow-wrap: break-word;">
   pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
</p>

L'effet est le suivant :

2. Réaliser un retour à la ligne du débordement de texte

Ce qui suit est un paragraphe qui ne dépasse pas la limite . Une fois la largeur du conteneur dépassée, le texte débordera :

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ex vel luctus dapibus. Curabitur velit arcu, efficitur ut dictum at, pharetra vel nibh. Duis auctor lacus non magna ultricies, vitae sollicitudin enim imperdiet. Fusce adipiscing euismod velit, id rhoncus dolor gravida vel.
</p>

Lorsque la largeur du conteneur est petite, le contenu sera tronqué ou dépassera la largeur du conteneur. Afin de résoudre ce problème, nous utilisons l'attribut dépassement de ligne :

<p style="overflow-wrap: break-word;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ex vel luctus dapibus. Curabitur velit arcu, efficitur ut dictum at, pharetra vel nibh. Duis auctor lacus non magna ultricies, vitae sollicitudin enim imperdiet. Fusce adipiscing euismod velit, id rhoncus dolor gravida vel.
</p>

L'effet est le suivant :

Dans certains cas, l'utilisation de l'attribut dépassement de ligne peut vous aider efficacement à résoudre le problème du dépassement du conteneur. largeur et rendre votre conception Web plus belle et plus facile à lire.

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!