是否可以在不使用 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
    ,