Hide specific text using just CSS?

Question

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...

Using just CSS.... nope. Do you "own" the php file or is it a 3rd party's? If you own it you should be able to decrypt it. A complicated option would be to call the initial PHP page with a new PHP page, then parse the contents to remove what you want. — Jon P
– Jon P, Commented Jun 4, 2015 at 5:27
No, it's a third party script that encrypts the licensing files and admin files. — Jamie
– Jamie, Commented Jun 4, 2015 at 5:27
It's worth nothing that the CSS ::first-line pseudoclass can select just the first line. Won't help here, though, unfortunately. — Jeremy Blalock
– Jeremy Blalock, Commented Jun 4, 2015 at 5:36

Gangula · Accepted Answer · 2021-10-05 02:23:05Z

3

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>

edited Oct 5, 2021 at 2:23

Gangula

7,8005 gold badges53 silver badges95 bronze badges

answered Jun 4, 2015 at 5:42

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nxa Over a year ago

This is even clever than mine, +1 for your answer.

nxa · Accepted Answer · 2015-06-04 05:48:16Z

1

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!!!

edited Jun 4, 2015 at 5:48

answered Jun 4, 2015 at 5:39

nxa

3,0623 gold badges23 silver badges45 bronze badges

2 Comments

Jon P Over a year ago

Could you please include the code in the answer itself, or better still use a code snippet. The <> button. StackOverflow's equivalent to jsfiddle

Uxonith Over a year ago

I believe this would make the Randall Munroe, author of XKCD, very angry xkcd.com/1271 :)

Collectives™ on Stack Overflow

Hide specific text using just CSS?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related