Est-il possible d'avoir plusieurs classes span sur la même ligne sans utiliser div ?
P粉035600555
P粉035600555 2024-04-03 11:17:18
0
1
362

Je voulais que chaque texte ait une couleur différente, j'ai donc utilisé plusieurs classes span pour définir les couleurs en CSS. Je voulais aussi que le texte ait des sauts de ligne, j'ai donc utilisé un div. Ce violon montre les résultats souhaités, mais les balises div utilisées pour les sauts de ligne créent de grands espaces. Existe-t-il un autre moyen d'effectuer un retour à la ligne dans plusieurs classes span ?

Violon : https://jsfiddle.net/nh7vswco/

<pre id="info">
       
                <div class = "fact-card">               
                <span class="animal">  animal</span>
                <span class="colon"> : </span>
                <span class="animal-name">tiger</span>
                <span class="comma">,</span> 
                </div> 
                
                <div class = "fact-card">
                <span class="animal">  species</span>
                <span class="colon"> : </span>
                <span class="animal-name">Mammal</span>
                <span class="comma">,</span>
                </div>
                
                <div class = "fact-card">
                <span class="animal">  type</span>
                <span class="colon"> : </span>
                <span class="animal-name">carnivore</span>
                <span class="comma">,</span>
                </div>
Result:
Each word and colon should have a different color.
animal : tiger,
species : mammal,
type : carnivore,

Le résultat de ce violon est violon : https://jsfiddle.net/nh7vswco/, mais je souhaite supprimer les lacunes dans les balises div.

P粉035600555
P粉035600555

répondre à tous(1)
P粉574268989

1- Il existe de nombreuses façons de faire des sauts de ligne comme celui-ci :
ou line-break propriétés CSS.

2- Supprimez les lacunes dans les balises div. Nous pouvons utiliser line-height: 0%;

  
       
    
animal : tiger ,
species : Mammal ,
type : carnivore ,
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!