使用CSS隐藏部分内容

| 我有以下样式标记。我的问题是我只想显示部分内容。 .standfirst中的文本需要隐藏，但.byline中的文本需要显示。 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>

已邀请:

5 个回复

藐刚

最好的方法是重构HTML，以便您可以轻松选择要显示的部分。但是，可以（尽管很难）使用该标记。

.standfirst {
   font-size: 0;   
}

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

jsFiddle。

戒黑恳农

您无法通过此处显示的嵌套来做到这一点。唯一的方法是以某种方式分别包装要隐藏的内容，例如

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

贡炮逗握惫

您需要使用以下内容包装文字：

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

辩谷变充

如果隐藏父元素，则无法显示内部元素。下注选项是将标记更改为可以使用的标记，也许为其余文本添加另一个跨度并将其隐藏。

提孺局缎

像这样的东西在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隐藏部分内容

5 个回复

发起人

css3

css

问题状态

使用CSS隐藏部分内容

与内容相关的链接

5 个回复

发起人

css3

css

问题状态