CODEWITHSUNDEEP
css
Jamie
Jamie

Reputation: 95

Hide specific text using just CSS?

Here's a copy of the code I'm referring to:

<div id="incomeforecast">
    <div style="float:left;margin:10px 0 10px 0;width:100%;text-align:center;">
        <span class="textred"><b>USD Currency</b></span><br>
            Monthly: $0.00 USD (0)<br>
            Quarterly: $0.00 USD (0)<br>
            Semi-Annually: $0.00 USD (0)<br>
            Annually: $0.00 USD (0)<br>
            Biennially: $0.00 USD (0)<br>
            Triennially: $0.00 USD (0)<br>
        <span class="textgreen"><b>Est. Annual: $0.00 USD</b></span>
    </div>
</div>

I need to hide this from displaying on the page:

            Biennially: $0.00 USD (0)<br>
            Triennially: $0.00 USD (0)<br>

Is there any way to do this with just CSS? The PHP file outputting it is encrypted and there's no Javascript files included in the page, so only CSS can be used...

Upvotes: 1

Views: 17274

Answers (2)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

I have achieved this in a different way using position relative and asbolute. Look at my code. But you have sure about the proper text size and height.

#incomeforecast div{position:relative;}
#incomeforecast div span:last-child
{
    height:35px;
    margin-top:-30px;
    display:block;
    background-color:#fff;
    position:absolute;
    bottom:0px;
    left:0;
    right:0;    
}
<div id="incomeforecast">
    <div style="float:left;margin:10px 0 10px 0;width:100%;text-align:center;">
        <span class="textred"><b>USD Currency</b></span><br>
            Monthly: $0.00 USD (0)<br>
            Quarterly: $0.00 USD (0)<br>
            Semi-Annually: $0.00 USD (0)<br>
            Annually: $0.00 USD (0)<br>
            Biennially: $0.00 USD (0)<br>
            Triennially: $0.00 USD (0)<br>
        <span class="textgreen"><b>Est. Annual: $0.00 USD</b></span>
    </div>
</div>

Upvotes: 3

absqueued
absqueued

Reputation: 3063

Yup there is a way. You can see below:

body {
    font:14px/1.7 Arial;
    color:#444;
}

.txts {
    border:1px solid #ccc;
    padding:10px;
    height:130px;
    overflow:hidden;
    position:relative;
}

.txts .textgreen {
    position:absolute;
    left:10px;
    bottom:0;
    background:#fff;
    height:20px;
    padding-bottom:5px;
}
<div id="incomeforecast">
    <div class="txts">
        <span class="textred"><b>USD Currency</b></span><br>
            Monthly: $0.00 USD (0)<br>
            Quarterly: $0.00 USD (0)<br>
            Semi-Annually: $0.00 USD (0)<br>
            Annually: $0.00 USD (0)<br>
            Biennially: $0.00 USD (0)<br>
            Triennially: $0.00 USD (0)<br>
        <span class="textgreen"><b>Est. Annual: $0.00 USD</b></span>
    </div>
</div>

Idea is, you make the text container box height limited to show only till the line you wanted to be visible. Then add overflow:hidden;

Now the tricky part was to show the last line. Luckily you have a tag there so we can use position for that. position:absolute to that element - pull it on bottom. Add white background so that text underneath won't be visible.

Bingo!!!

Upvotes: 1

Related Questions