使用css隐藏部分内容

问题描述：

我有以下标记为样式。我有的问题是我只想显示它的一部分。 .standfirst中的文本需要隐藏，但.byline中的文本需要显示。使用css隐藏部分内容

这甚至可能与CSS？

<p class="standfirst"> 
<span class="article-info"><em class="byline">Rory Callinan</em></span> 
A FORMER nightwatchman at the Port Macquarie company accused of dumping contaminated waste. 
</p>

答

最好的方法是重构您的HTML，以便您可以轻松地选择想要看到的部分。

但是，它是可能（尽管丑陋）使用该标记。

.standfirst { 
    font-size: 0; 
} 

.standfirst .byline { 
    font-size: 12px; 
}

jsFiddle。

这是一个很好的技巧，谢谢。 – calebo 2011-05-26 04:29:01

答

你需要的东西来包装你的文字：

<p class="standfirst"> 
    <span class="article-info"><em class="byline">Rory Callinan</em></span> 
    <span class="article-text">A FORMER nightwatchman at the Port Macquarie company accused of dumping contaminated waste.</span> 
</p>

然后很容易：

.article-text { display: none; }

雅我知道，但问题是我不能改变标记。否则我不会在这里发布这个问题。 – calebo 2011-05-26 04:08:49

答

如果隐藏父元素不能显示内部元素。投注选项是将标记更改为可以工作的内容，也许为文本的其余部分添加另一个跨度并隐藏该内容。

我希望是否有任何解决方法。 :( – calebo 2011-05-26 04:09:44

你可以肯定地改变标记，即使它的cms产生...有丑陋，缓慢的jquery选项，但与CSS我认为你运气不好 – Claudiu 2011-05-26 04:13:02

不幸的是，这是我的约束。 – calebo 2011-05-26 04:17:27

答

你不能用你在这里显示的嵌套来做到这一点。唯一的方法就是以某种方式分开包裹你想要隐藏的东西，例如

<p class="standfirst"> 
<span class="article-info"><em class="byline">Rory Callinan</em></span> 
<span class='content'>A FORMER nightwatchman at the Port Macquarie company accused of dumping contaminated waste.</span> 
</p>

希望有一种方法不必更改标记，因为它是CMS生产的。 – calebo 2011-05-26 04:10:12

不会发生，您必须更改服务器上的标记（大多数CMS提供模板选项），否则您可能会破解它与客户端上的JavaScript，但这可能更容易发生bug – Paul 2011-05-26 04:11:53

答

像这样的东西适用于Chrome和IE6。显然 - 这不是最好的方法，但是如果你需要让它起作用，那么这可能是一个选择。请注意，以这种方式隐藏的元素仍然占用页面上的空间。

<html> 
    <head> 
     <style type="text/css"> 
      .standfirst { visibility: hidden; } 
      .standfirst .article-info { visibility: visible; } 
     </style> 
    </head> 
    <body> 
     <p class="standfirst"> 
      <span class="article-info"><em class="byline">Rory Callinan</em></span> 
      A FORMER nightwatchman at the Port Macquarie company accused of dumping contaminated waste. 
     </p> 
    </body> 
</html>

使用css隐藏部分内容

相关推荐