CODEWITHSUNDEEP
css
calebo
calebo

Reputation: 3432

Hiding partial content using css

I have the below mark-up to style. Problem I have is I only want to show partial of it. The text within .standfirst needs to hide but text within .byline needs to show.

Is that even possible with CSS?

<p class="standfirst">
<span class="article-info"><em class="byline">Rory Callinan</em></span>
A FORMER nightwatchman at the Port Macquarie company accused of dumping contaminated waste.
</p>

Upvotes: 0

Views: 2595

Answers (5)

jeremysawesome
jeremysawesome

Reputation: 7254

Something like this works for me in Chrome and IE6. Obviously - this isn't the best method, but if you need to get it to work than this could be an option. Be aware, elements hidden in this way still take up space on the page.

<html>
    <head>
        <style type="text/css">
            .standfirst { visibility: hidden; }
            .standfirst .article-info { visibility: visible; }
        </style>
    </head>
    <body>
        <p class="standfirst">
            <span class="article-info"><em class="byline">Rory Callinan</em></span>
            A FORMER nightwatchman at the Port Macquarie company accused of dumping contaminated waste.
        </p>
    </body>
</html>

Upvotes: 0

alex
alex

Reputation: 490143

The best way would be to refactor your HTML so you could easily select the portion you want visible.

However, it is possible (albeit ugly) using that markup.

.standfirst {
   font-size: 0;   
}

.standfirst .byline {
   font-size: 12px;   
}

jsFiddle.

Upvotes: 1

Paul
Paul

Reputation: 36319

You can't do it with the nesting you've shown here. The only way to do it is to wrap what you want to hide separately in some fashion, e.g.

<p class="standfirst">
<span class="article-info"><em class="byline">Rory Callinan</em></span>
<span class='content'>A FORMER nightwatchman at the Port Macquarie company accused of dumping contaminated waste.</span>
</p>

Upvotes: 2

Claudiu
Claudiu

Reputation: 3261

If you hide the parent element you can't display inner elements. Bets option is to change your markup to something that would work, maybe adding another span for the rest of the text and hide that.

Upvotes: 0

jrn.ak
jrn.ak

Reputation: 36619

You'll need to wrap your text with something:

<p class="standfirst">
    <span class="article-info"><em class="byline">Rory Callinan</em></span>
    <span class="article-text">A FORMER nightwatchman at the Port Macquarie company accused of dumping contaminated waste.</span>
</p>

And then it's easy:

.article-text { display: none; }

Upvotes: 1

Related Questions