是否可以在不使用 div 的情況下在同一行上有多個 span 類別？

Question

我想讓每個文字都有不同的顏色，所以我使用了多個跨度類別來設定 css 中的顏色。我還希望文字有換行符，所以我使用了 div。這個小提琴顯示了我想要的結果，但是用於換行符的 div 標籤產生了很大的間隙。還有另一種方法可以在多個跨度類別中進行換行嗎？

小提琴：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,

這個小提琴的結果是小提琴：https://jsfiddle.net/nh7vswco/，但我想刪除 div 標籤中的間隙。

Answer 1

1- 有很多方法可以這樣換行：
或 line-break CSS 屬性。

2- 刪除 div 標籤中的間隙。我們可以使用 line-height: 0%;

  
       
    
               
      animal
     : 
    tiger
    , 
    
 
    
    

      species
     : 
    Mammal
    ,
    
    
    

      type
     : 
    carnivore
    ,