chustar chustar -4 years ago 85
CSS Question

How do you remove a line from <pre> without leaving an empty line?

Given a

<pre>
containing multiple
<span>
s, how would you remove one of those
<span>
s without leaving an empty row?



span {
background-color: blue;
}
#text2 {
display: none;
}

<pre>
<span id="text1">SOME RANDOM TEXT</span>
<span id="text2">SOME RANDOM TEXT</span>
<span id="text3">SOME RANDOM TEXT</span>
</pre>





I've tried switching to a
<div>
and using
white-space
but that doesn't get the same result.

Answer Source

set pre white-space:nowrap and set span display to table or block

pre{
      white-space:nowrap;/* nowrap or normal will give you same output*/
}
span {
    display:table;/* use table for same output. you can try display block also */
    background-color: blue;

  
}
#text2 {
    display: none;
}
<pre>
 <span id="text1">SOME RANDOM TEXT</span>
 <span id="text2">SOME RANDOM TEXT</span>  
 <span id="text3">SOME RANDOM TEXT</span>
</pre>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download