Clever Geek Handbook

Hiding with CSS

Is there a way to hide  

using CSS?

I have a value like AMBASSADOR                 (1982.03 - 1984.10)

And I want everyone to  

appear as one regular space;

This is for <select>

options for displaying something like http://i.imgur.com/v3xPqMh.png

+5


source to share


3 answers


You cannot hide only certain pieces of text with CSS. &nbsp

- the rendered symbol is the same as a letter G

or X

you cannot select certain letters with CSS, so it really cannot be done as it is currently done.



+1


source


As far as I know, there is no CSS selector for the text inside the tag. If you are trying to create spaces that are only hidden in certain situations, you can try this. In this example, I have a space that I only need on mobile.



@media (max-width: 500px){
  .hide-mobile{
    display: none;
  }
}
      

        
        
        
      

    
<p>Test<span class="hide-mobile">&nbsp;</span>Test</p>
Run codeHide result


0


source


As @Chris Barr said , you can't fix this with CSS as we don't have any character selector.

The last option I see on the frontend side is to use a little JavaScript to clean up the text. The dom node will not contain literal &nbsp;

strings, so you will have to use String.fromCharCode(160)

to find and replace them.

Yes, it's not with CSS.

const span = document.getElementById('fixMe');

const replacement = new RegExp(String.fromCharCode(160), 'g')

span.innerText = span.innerText.replace(replacement, " ");
      

        
        
        
      

    
<span id="fixMe"> AMBASSADOR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1982.03 - 1984.10)
</span>
Run codeHide result


0


source






More articles:


All Articles