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.