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

Question

我有一些 HTML 代码，如下所示:

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

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

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

到

display: none;

这样只会留下“电话号码 - 其他”可见。

我可以只使用 CSS 来做到这一点，而无需触及/调整 HTML 吗？我知道我可以简单地在我想隐藏在较小视口(viewport)上的位周围放置一个带有类的 div，但出于某些原因我真的不想这样做。

在此先感谢您的帮助!

Answer 1

只需使用 parents 伪 :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>