CODEWITHSUNDEEP
htmlcss
Tienus McVinger
Tienus McVinger

Reputation: 477

can I hide certain HTML things using purely CSS?

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!

Upvotes: 3

Views: 118

Answers (4)

Andrew
Andrew

Reputation: 2975

something like this?

@media screen and (max-width: 500px) {
address {
    position: absolute;
    width: 0;
    height: 0;
    font-size: 0;
    z-index: -999;
}
address:after {
    position: static;
     content: 'telephone no';
    display: block;
    width: 100px
        height: auto;
    font-size: 14px;
    white-space: nowrap;

}
}

JsFiddle

although the answer has already been chosen, i do like to explode more on this topic personally. If anyone is interested, here's a non :after pseudo class way of doing it

@media screen and (max-width: 800px) {
address {
    width: 82px;
    height: 20px;
    overflow: hidden;
    background-color: salmon;
}
}

always look for others possible ways!

Upvotes: 1

Rohit Kandpal
Rohit Kandpal

Reputation: 11

There is no functionality in css to hide it as you have written in html, You have to put it between a div or any tag.

Upvotes: 0

DavidDomain
DavidDomain

Reputation: 15293

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>

Upvotes: 2

Mr Lister
Mr Lister

Reputation: 46539

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>

Upvotes: 2

Related Questions