Question

我有一些看起来像这样的HTML代码：

<address>telephone no  <span>-</span>  Some Street 2  <span>-</span>  9999 ZZ Place <span>-</span>  Something else</address>

这段代码在响应式网站上，在一个非常小的视口上我想设置

Some Street 2  <span>-</span>  9999 ZZ Place <span>-</span>

到

display: none;

然后只会留下“电话号码 - 其他东西”。

我可以使用纯CSS，而无需触摸/调整HTML吗？我知道我可以简单地将一个div放在我想要隐藏在较小视口上的一个类，但出于某些原因我真的不想。

提前感谢您的帮助！

Answer 1

我想出了这个。它有一个问题：我不确定如何将最后一行直接放在第一行的右边，所以我不得不硬编码第一行的宽度（在7em）。
如果有人能提出更好的想法，我有兴趣听到它。

＆＃13;

@media (max-width: 30em) {
  address {
    height: 1.25em;
    line-height: 1.25;
    overflow: hidden;
    padding-left: 7em;
    text-indent: -7em;
  }
  address span {
    display: block;
  }
  address span:nth-child(2) {
    margin-top: -7.5em;
  }
}

＆＃13;

<address>telephone no  <span>-</span>  Some Street 2  <span>-</span>  9999 ZZ Place <span>-</span>  Something else</address>

＆＃13;

Answer 2

只需使用parent pseudo :after元素即可显示所需的文字。

@media (max-width: 920px) { /* <--- desired sceensize to change address */
    address {
        display: none;
    }

    div:after {
        content: 'telephone no - Some Street';
        font-style: italic;
    }

}

<div>
    <address>telephone no  <span>-</span>  Some Street 2  <span>-</span>  9999 ZZ Place <span>-</span>  Something else</address>   
</div>

Answer 3

这样的事情？

@media screen and (max-width: 500px) {
address {
    position: absolute;
    width: 0;
    height: 0;
    font-size: 0;
    z-index: -999;
}
address:after {
    position: static;
     content: 'telephone no';
    display: block;
    width: 100px
        height: auto;
    font-size: 14px;
    white-space: nowrap;

}
}

JsFiddle

虽然已经选择了答案，但我确实想亲自讨论这个话题。如果有人感兴趣，这里是非伪后的做法

@media screen and (max-width: 800px) {
address {
    width: 82px;
    height: 20px;
    overflow: hidden;
    background-color: salmon;
}
}

always look for others possible ways!

Answer 4

css中没有任何功能可以隐藏它，因为你用html写的，你必须把它放在div或任何标签之间。

我可以使用纯CSS隐藏某些HTML内容吗？

4 个答案: