我能使用纯CSS隐藏特定的HTML元素吗？

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>  

to

display: none;

如果我只想在“电话号码-其他信息”可见，是否可以只使用纯CSS而不改动/调整HTML代码呢？我知道我可以在较小的视口周围放一个带类的div来隐藏我想要隐藏的部分，但是出于某些原因，我真的不想这样做。

谢谢您提前的帮助！

- Tienus McVinger

---

只有通过编辑HTML输出或使用JavaScript才可能实现。 - Mindaugas Jakubauskas

不正确。你不需要加载一个32kb的库来使用JavaScript实现这个功能。 - idmean

你不能使用CSS影响比完整元素更小的任何东西。那么，“你真的不想”的“某些原因”是什么？ - Amadan

如果我愿意透露那些特定的原因，我肯定一开始就不会称它们为“特定的原因”了；）虽然我认为这是不可能的，但总有可能有你不知道的显而易见的事情，这就是我问的原因。 :) - Tienus McVinger

如果我理解正确的话，我认为你想要的是不可能实现的。但是通过一些JavaScript是可以实现的。需要运行一些字符串函数来确定地址的特定部分。否则，我建议稍微修改HTML，但这会违背你的偏好。你可以使用span隐藏而不是div，使用span不会干扰布局。 - josh.thomson

Answer 1

我想出了这个方案。但是它存在一个问题：我不确定如何将最后一行直接定位在第一行的右侧，所以我必须硬编码第一行的宽度（为7em）。 如果有人能想出更好的方法，我很感兴趣听听。

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

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

- Mr Lister

---

我的错..我没有调整大小..非常好的答案..:) - Leo the lion

这个回答和@DavidDomain的回答都非常好！非常感谢 :) - Tienus McVinger

我喜欢它，这是一种创新的方法，可以让CSS在原有功能之外实现其他功能。+1 - Hidden Hobbes

Answer 2

只需使用父伪元素: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>

- DavidDomain

---

我提到了这是HTML代码。我认为可以假设它只是一些静态的、非变量的文本。 - Tienus McVinger

@Mr Lister 嗯，我的电话号码一直都是一样的。;-) 如果它每天都变化的话，那就有点疯狂了，你觉得呢？ - DavidDomain

谢谢您，帮助很大:D - Tienus McVinger

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

虽然答案已经被选择，但我个人还是想更深入地探讨这个话题。如果有人感兴趣，这里有一种非 :after 伪类的方法可以实现它。

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

总是寻找其他可能的方法！

- Andrew

Answer 4

在CSS中没有隐藏它的功能，就像您在HTML中编写的那样，您必须将它放在

或任何标记之间。

- Rohit Kandpal