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
You cannot hide only certain pieces of text with CSS.  
- 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.
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"> </span>Test</p>
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
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 (1982.03 - 1984.10)
</span>