Comment envelopper automatiquement les balises span HTML ? Introduction à l'utilisation de la balise HTML span

Cet article vous explique principalement comment envelopper automatiquement les balises span HTML et présente l'utilisation et l'introduction des sept attributs de span. Ensuite, examinons cet article ensemble

Tout d'abord, nous présenterons comment faire en sorte que les balises span soient automatiquement renvoyées à la ligne. Examinons d'abord cet exemple :

<.>

<span style="width:80%;word-break:normal;display:block;white-space:pre-wrap;overflow:hidden;color:#0066CC;">这是随便可以
输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以
输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；</span>

Exemple d'explication de la balise span HTML :

espace blanc : Contrôlez la disposition du texte affiché sur la page grâce à la disposition du code source du document HTML

Prendre la valeur : normal | pre nowrap | pre-wrap | pre-line . Si la limite du conteneur est atteinte, le contenu passera à la ligne suivante)

• pre : Conserver les espaces et les sauts de ligne du code source HTML, équivalents à la balise pre <🎜. >

nowrap : force le texte à être sur une seule ligne, sauf si la balise de retour à la ligne br est rencontrée
pre-wrap : le même que le pré attribut, mais il sera automatiquement renvoyé lorsqu'il dépasse la portée du conteneur
pré-ligne : identique à l'attribut pre, mais lorsqu'il rencontre des espaces consécutifs, il sera traité comme un espace
• Regardez l'affichage du code ci-dessus dans le navigateur :

Comme le montre l'image ci-dessus , le texte affiché dans l'image ci-dessus n'occupe que 80 % de la page. Il est acceptable d'utiliser ce paramètre pour renvoyer automatiquement les lignes à la ligne.

Regardons un exemple de balise span HTML :

Explication de la balise span HTML :

Si vous n'appliquez pas de styles à un span, le texte dans l'élément span ne sera pas visuellement différent des autres textes. Néanmoins, l'élément span dans l'exemple ci-dessus ajoute une structure supplémentaire à l'élément p.

<p>
<span>这只是普通文本</span>
这也是普通文本</p>

Vous pouvez appliquer des attributs id ou class à span, ce qui peut non seulement ajouter une sémantique appropriée, mais également faciliter l'application de styles à span. Il est possible d'appliquer des attributs class ou id au même élément , mais il est plus courant d'appliquer uniquement l'un ou l'autre. La principale différence entre les deux est que class est utilisé pour des groupes d'éléments (éléments similaires ou peut être compris comme un certain type d'éléments), tandis que id est utilisé pour identifier des éléments individuels et uniques.

Conseil : En fait, vous avez peut-être remarqué que le « point » est en orange gras. Bien qu'il existe de nombreuses façons d'obtenir cet effet, notre approche est la suivante : utilisez le "indice" pour utiliser l'élément span, puis appliquez la classe à l'élément parent de cet élément span, c'est-à-dire l'élément p, afin que vous puissiez appliquer span à l'élément enfant de cette classe Style correspondant.

HTML :

CSS :

Le rendu est très simple :

<p class="tip"><span>提示：</span>这里是PHP文本</p>

p.tip span {
font-weight:bold;
color:#ff9955;
}

[ Petite recommandation de l'éditeur]

La balise html p est-elle une seule balise ? Introduction à l'utilisation des balises html p (avec exemples)

Comment créer le style de liste déroulante de sélection html ? Explication détaillée du style de sélection HTML

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!