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

來源

2011-05-26 calebo

最好的方法是重構您的HTML，以便您可以輕鬆地選擇想要看到的部分。

但是，它是可能（儘管醜陋）使用該標記。

.standfirst { 
    font-size: 0; 
} 

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

jsFiddle。

來源

2011-05-26 04:10:49 alex

這是一個很好的技巧，謝謝。 – 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; }

來源

2011-05-26 04:01:50 drudge

雅我知道，但問題是我不能改變標記。否則我不會在這裏發佈這個問題。 – calebo 2011-05-26 04:08:49

如果隱藏父元素不能顯示內部元素。投注選項是將標記更改爲可以工作的內容，也許爲文本的其餘部分添加另一個跨度並隱藏該內容。

來源

2011-05-26 04:02:08 Claudiu

我希望是否有任何解決方法。 :( – 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>

來源

2011-05-26 04:02:15 Paul

希望有一種方法不必更改標記，因爲它是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>

來源

2011-05-26 04:35:05 jeremysawesome

使用css隱藏部分內容

回答

相關問題