can I hide certain HTML things using purely CSS?

Question

I've got a bit of HTML code that looks like this:

<address>telephone no  <span>-</span>  Some Street 2  <span>-</span>  9999 ZZ Place <span>-</span>  Something else</address>

This bit of code is on a responsive website, and on a very small viewport I want to set the

Some Street 2  <span>-</span>  9999 ZZ Place <span>-</span>  

to

display: none;

which would then only leave "Telephone no - Something else" visible.

Can I do this, using purely CSS, without touching/tweaking the HTML whatsoever? I know I can simply put a div with a class around the bit that I want to hide on a smaller viewport, but for certain reasons I'd really rather not.

Thanks in advance for any help!

Answer 1

Just use the parents pseudo :after element to show your desired text.

@media (max-width: 920px) { /* <--- desired sceensize to change address */
    address {
        display: none;
    }

    div:after {
        content: 'telephone no - Some Street';
        font-style: italic;
    }

}

<div>
    <address>telephone no  <span>-</span>  Some Street 2  <span>-</span>  9999 ZZ Place <span>-</span>  Something else</address>   
</div>

Answer 2

I came up with this. It suffers from a problem though: I'm not sure how to position the last line directly to the right of the first one, so I had to hardcode the width of the first (at 7em).
If anyone can come up with a better idea, I'm interested in hearing about it.

@media (max-width: 30em) {
  address {
    height: 1.25em;
    line-height: 1.25;
    overflow: hidden;
    padding-left: 7em;
    text-indent: -7em;
  }
  address span {
    display: block;
  }
  address span:nth-child(2) {
    margin-top: -7.5em;
  }
}

<address>telephone no  <span>-</span>  Some Street 2  <span>-</span>  9999 ZZ Place <span>-</span>  Something else</address>