Comment implémenter l'affichage HTML sans sauts de ligne-Questions et réponses frontales-php.cn

Comment implémenter l'affichage HTML sans sauts de ligne

PHPz

Libérer： 2023-04-21 14:38:23

original

3942 Les gens l'ont consulté

Le HTML est affiché sans retour à la ligne

En HTML, le texte s'ajuste automatiquement par défaut. Il s'enroule automatiquement lorsqu'il rencontre le bord de la fenêtre du navigateur ou la largeur définie. Mais parfois, nous voulons que le texte ne soit pas renvoyé à la ligne. ?

Voici plusieurs façons d'obtenir un affichage sans retour à la ligne :

Utilisez la balise

La balise est une balise non standard en HTML, qui empêche le texte d'être automatiquement renvoyé à la ligne.

Par exemple :

<nobr>这是一段不换行的文字</nobr>

Copier après la connexion

L'effet affiché dans le navigateur est le suivant : il s'agit d'un morceau de texte sans saut de ligne.

Cependant, il convient de noter que la balise est obsolète en HTML5 et n'est plus recommandée.

Utilisez la propriété white-space de CSS

La propriété white-space en CSS peut contrôler la façon dont les caractères d'espacement à l'intérieur de l'élément sont affichés. Il a plusieurs valeurs communes :

normal : règles normales de retour à la ligne.
nowrap : le texte ne doit pas être renvoyé à la ligne sauf si la balise   est rencontrée.   标签。
pre：保留空白符序列，但是正常换行（只有在遇到   标签或者明确指定的换行符时才会换行）。
pre-wrap：保留空白符序列，但是会正常换行。
pre-line：合并空白符序列，但是正常换行（只有在遇到

 

pre-wrap : conservez la séquence d'espaces, mais enveloppez les lignes normalement.

pré-ligne : combinez des séquences d'espaces, mais effectuez un retour à la ligne normalement (uniquement lorsque vous rencontrez des balises   ou des nouvelles lignes explicitement spécifiées).

Par exemple :

<p style="white-space:nowrap;">这是一段不换行的文字</p>

Copier après la connexion

Le code ci-dessus peut afficher le texte sans retour à la ligne.

Si vous souhaitez que le texte contenu dans un élément ne soit pas renvoyé à la ligne, vous pouvez ajouter white-space:nowrap; au style de cet élément.

La propriété text-overflow en CSS peut spécifier ce qui doit être fait lorsque le texte déborde du conteneur. Il a les valeurs communes suivantes :
clip : tronque le texte et n'affiche pas la partie de débordement.

ellipse : remplacez les pièces de trop-plein par des ellipses.

string : remplacez la partie de débordement par la chaîne spécifiée.

Par exemple :

<p style="width:100px;overflow:hidden;text-overflow:ellipsis;">这是一段会溢出的文字，被省略号替代。</p>

Copier après la connexion

Le code ci-dessus définit la largeur du conteneur du texte à 100 px, et la partie débordante est remplacée par des points de suspension afin que le texte ne soit pas renvoyé à la ligne.

Il convient de noter que l'attribut text-overflow ne prendra effet que lorsque l'espace blanc est défini sur nowrap ou pre-wrap. 🎜🎜Résumé🎜🎜Les trois méthodes ci-dessus peuvent obtenir un affichage sans retour à la ligne en HTML, mais il est recommandé d'utiliser la propriété d'espace blanc de CSS car elle est conforme aux normes et peut non seulement réaliser un retour à la ligne sans retour à la ligne, mais également contrôler l’habillage du texte. Vous devriez également essayer d'éviter d'utiliser la balise , car elle est obsolète. 🎜

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!