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, Jun 04 '15 at 05:27
No, it's a third party script that encrypts the licensing files and admin files. — Jamie, Jun 04 '15 at 05: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, Jun 04 '15 at 05:36
http://stackoverflow.com/questions/1966441/how-to-select-nth-line-of-text-css-js — sobolevn, Jun 04 '15 at 05:38

score 3 · Accepted Answer · edited Oct 05 '21 at 02:23

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>

This is even clever than mine, +1 for your answer. – absqueued Jun 04 '15 at 05:46 — absqueued, Jun 04 '15 at 05:46

absqueued · Answer 2 · 2015-06-04T05:48:16.467

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

Could you please include the code in the answer itself, or better still use a code snippet. The <> button. StackOverflow's equivalent to jsfiddle — Jon P, Jun 04 '15 at 05:46
I believe this would make the Randall Munroe, author of XKCD, very angry https://xkcd.com/1271/ :) — Uxonith, Jan 16 '19 at 21:46

Hide specific text using just CSS?

2 Answers2