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