Comment définir le retour à la ligne automatique pour le texte dans les pages Web

Cette fois, je vais vous montrer comment définir le retour à la ligne automatique du texte dans les pages Web. Quelles sont les précautions pour définir le retour à la ligne automatique du texte dans les pages Web. Voici un cas pratique, prenons. un regard.

Dans une page web, il sera utilisé pour afficher un morceau de texte, mais la longueur et le contenu du texte ne sont pas connus à l'avance, on utilise principalement des div ou des pre remplis pour afficher le texte. texte.

Lorsque vous utilisez l'élément div, déterminez la largeur et ajoutez les deux attributs suivants pour vous assurer que le texte rempli dans le div s'enroule automatiquement.

word-wrap: break-word;   //word-wrap 属性允许长单词或 URL 地址换行到下一行。//break-word在长单词或 URL 地址内部进行换行。word-break: break-all;//word-break 属性规定自动换行的处理方法。

Lorsque vous utilisez l'élément pre, de la même manière, ajoutez les deux attributs suivants, et le texte qu'il contient peut être automatiquement renvoyé à la ligne.

white-space: pre-wrap;    //pre-wrap保留空白符序列，但是正常地进行换行。word-break: break-all;
word-wrap: break-word;

Nous connaissons tous les div, qui peuvent être remplis de texte ou d'autres éléments. Cependant, lorsque le texte est placé dans un div, il ne peut souvent pas conserver son format d'origine, comme des espaces. , retours chariot, etc. L'élément

pre définit le texte préformaté. Le texte enfermé dans un élément pre préserve généralement les espaces et les nouvelles lignes. Le texte sera également rendu dans une police à largeur fixe. Une application courante de la balise

pre consiste à représenter le code source informatique.

Les balises pouvant provoquer des sauts de paragraphe (telles que les balises de titre, p et d'adresse) ne doivent pas être incluses dans un bloc défini par pre. Bien que certains navigateurs interprètent la balise de fin de paragraphe comme un simple saut de ligne, ce comportement n'est pas le même dans tous les navigateurs. Le texte autorisé dans l'élément

pre peut inclure des styles physiques et des variations de style basées sur le contenu, ainsi que des liens, des images et des séparateurs horizontaux. Lorsque vous placez d'autres balises (telles qu'une balise) dans le bloc pré, traitez-la simplement comme si elle était placée dans d'autres parties du document HTML/XHTML.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment ajouter des événements au bouton dans React

Comment utiliser select pour obtenir la valeur sélectionnée

Définir le HTML pour div dans React

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!