Clever Geek Handbook

Keep separate text on same line as div tag

I am using CSS to make a portion of my text font bold. But I don't want the whole line to be bold. Only part of the text. How can I achieve this? Here is my code:

Html

<div>
   <div id="titleLabels">Revision:</div> 1.0 draft A
</div>

CSS

#titleLabels 
{
   font-weight: bold;
}

The result of this:

enter image description here

This is not what I want. I want the "1.0 draft A" bit embedded in the bit that says "Revision".

How can i do this?

+3


source to share


3 answers


Just add display:inline

to #titleLabels

:

#titleLabels {
    font-weight: bold;
    display:inline;
}
      

        
        
        
      

    
<div>
    <div id="titleLabels">Revision:</div>1.0 draft A
</div>
Run codeHide result


Divs are block level elements by default and will span the entire width of their parent unless you change this.



More logical solution would be to not use divs in the text of the audit and instead use either <strong>

, <b>

or <span>

with a font style.

#titleLabels {
  font-weight: bold;
}
      

        
        
        
      

    
<div>
  <b>Revision:</b>1.0 draft A
</div>
<div>
  <strong>Revision:</strong>1.0 draft A
</div>
<div>
  <span id="titleLabels">Revision:</span>1.0 draft A
</div>
Run codeHide result


+2


source


Use display:inline-block 



#titleLabels 
{
   font-weight: bold;
    display:inline-block;
}
      

        
        
        
      

    
<div>
   <div id="titleLabels">Revision:</div> 1.0 draft A
</div>
Run codeHide result


+1


source


You can use a tag <b>

to simply highlight a specific segment of text in bold

<div>
   <b>Revision:</b> 1.0 draft A
</div>
Run codeHide result


+1


source






More articles:


All Articles