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

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 :

1. 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>

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.

2. 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 <br> est rencontrée. <br> 标签。
• pre：保留空白符序列，但是正常换行（只有在遇到 <br> 标签或者明确指定的换行符时才会换行）。
• pre-wrap：保留空白符序列，但是会正常换行。
• pre-line：合并空白符序列，但是正常换行（只有在遇到 <br>
pre : préserve les séquences d'espaces, mais s'enroule normalement (uniquement lorsqu'une balise <br> ou une nouvelle ligne explicitement spécifiée est rencontrée).

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 <br> ou des nouvelles lignes explicitement spécifiées).

Par exemple :

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

3. 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.

Utilisez la propriété text-overflow de CSS
• 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>

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!