Is it possible to have multiple span classes on the same line without using div?-CodePudding

I want to have each text have a different color so I used a multiple span classes to set the color in css. I also want the text to have line breaks so I used div. This fiddle shows the result I want but the div tags used for the line breaks creates a large gap. Is there another way to have line breaks with multiple span classes?

Fiddle: https://jsfiddle.net/nh7vswco/

                <pre id="info">
       
                <div class = "fact-card">               
                <span >  animal</span>
                <span > : </span>
                <span >tiger</span>
                <span >,</span> 
                </div> 
                
                <div class = "fact-card">
                <span >  species</span>
                <span > : </span>
                <span >Mammal</span>
                <span >,</span>
                </div>
                
                <div class = "fact-card">
                <span >  type</span>
                <span > : </span>
                <span >carnivore</span>
                <span >,</span>
                </div>

Result:
Each word and colon should have a different color.
animal : tiger,
species : mammal,
type : carnivore,

This fiddle has the result Fiddle: https://jsfiddle.net/nh7vswco/ but I would like to remove the gaps from the div tag.

CodePudding user response：

1- There are many ways to make a line break like so: <br> or line-break CSS property.

2- To remove the gaps from the div tag. we can use the line-height: 0%;

<style>#info {
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
  }
 
  .colon {
    color: #cc7832;
  }
  .animal-name {
    color: #2587be;
  }
  .animal {
    color:#9473a5;
    display: block;
  }
  .fact-card{
    display: flex; 
    line-height: 0%;
  } 
  .span {
    font-family: Arial;
  }

  <pre id="info">
       
    <div class = "fact-card">               
    <span >  animal</span>
    <span > : </span>
    <span >tiger</span>
    <span >,</span> 
    </div> 
    
    <div class = "fact-card">
    <span >  species</span>
    <span > : </span>
    <span >Mammal</span>
    <span >,</span>
    </div>
    
    <div class = "fact-card">
    <span >  type</span>
    <span > : </span>
    <span >carnivore</span>
    <span >,</span>
    </div>
  </pre>

CodePudding user response：

This issue is actually due to the side-effects of using the pre tag. The additional spacing you have in between the divs inside your pre tag are being interpreted as line breaks as that is what pre is meant to do. If you do not want this extra spacing, eliminate the extra white space (line breaks, spaces, etc.) you have.

                <pre id="info"><div class = "fact-card">               
                <span >  animal</span>
                <span > : </span>
                <span >tiger</span>
                <span >,</span> 
                </div><div class = "fact-card">
                <span >  species</span>
                <span > : </span>
                <span >Mammal</span>
                <span >,</span>
                </div><div class = "fact-card">
                <span >  type</span>
                <span > : </span>
                <span >carnivore</span>
                <span >,</span>
                </div>