Ist es möglich, mehrere Span-Klassen in derselben Zeile zu haben, ohne div zu verwenden?

Question

Ich wollte, dass jeder Text eine andere Farbe hat, also habe ich mehrere Span-Klassen verwendet, um die Farben in CSS festzulegen. Ich wollte auch, dass der Text Zeilenumbrüche hat, also habe ich ein Div verwendet. Diese Geige zeigt die gewünschten Ergebnisse, aber die für Zeilenumbrüche verwendeten div-Tags erzeugen große Lücken. Gibt es eine andere Möglichkeit, Zeilenumbrüche in mehreren Span-Klassen durchzuführen?

Geige: 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,

Das Ergebnis dieser Fiddle ist Fiddle: https://jsfiddle.net/nh7vswco/, aber ich möchte die Lücken in den div-Tags entfernen.

Answer 1

1- 有很多方法可以像这样进行换行：
或 line-break CSS 属性。

2- 删除 div 标签中的间隙。我们可以使用 line-height: 0%;