Question

这是我所指的代码的副本：

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

我需要将其隐藏在页面上显示：

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

有没有办法用CSS做到这一点？输出它的PHP文件是加密的，页面中没有包含Javascript文件，因此只能使用CSS ...

Answer 1

我使用position relative和asbolute以不同的方式实现了这一点。看看我的代码。但是你确定正确的文字大小和高度。

 #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;
 }

DEMO

Answer 2

是的，有一种方法。您可以在下面看到：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

理念是，您将文本容器框高度限制为仅显示直到您想要显示的行。然后添加overflow:hidden;

现在棘手的部分是显示最后一行。幸运的是，你有一个标签，所以我们可以使用位置。对该元素position:absolute - 将其拉到底部。添加白色背景，以便下面的文字不会显示。

<强> 宾果!!!

仅使用CSS隐藏特定文本？

2 个答案: