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

Question

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.

Is changing the `
` to a `
` and setting the `` to `white-space:pre` and `display:block` OK? See fiddle here: https://jsfiddle.net/dur5at5k/1/ — Cave Johnson, Mar 22 '17 at 18:44
Now, to the question... Is there a reason why you chose to use a `pre`? Because the issue is not with the elements inside, but with the fact that a `pre` tag interpret the line breaks literally... — LcSalazar, Mar 22 '17 at 19:19
@LcSalazar changing it from pre would require a lot of additional of additional css changes. — chustar, Mar 22 '17 at 21:12

Baezid Mostafa · Accepted Answer · 2017-03-22T21:59:36.157

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>

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

1 Answers1

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