1

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

Improve this question
6
  • Enclose this in div and add property display:none
    – Deadlock
    Commented Jun 4, 2015 at 5:25
  • "The PHP file outputting it is encrypted"
    – Jamie
    Commented Jun 4, 2015 at 5:26
  • 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
    Commented Jun 4, 2015 at 5:27
  • No, it's a third party script that encrypts the licensing files and admin files.
    – 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
    Commented Jun 4, 2015 at 5:36

2 Answers 2

Reset to default
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>

Improve this answer
1
  • This is even clever than mine, +1 for your answer.
    – absqueued
    Commented Jun 4, 2015 at 5:46
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!!!

Improve this answer
2
  • 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
    Commented Jun 4, 2015 at 5:46
  • I believe this would make the Randall Munroe, author of XKCD, very angry xkcd.com/1271 :)
    – Uxonith
    Commented Jan 16, 2019 at 21:46

Not the answer you're looking for? Browse other questions tagged or ask your own question.