Скрытие частичного содержимого с помощью CSS - PullRequest
Новая
       1

Скрытие частичного содержимого с помощью CSS

0 голосов
/ 26 мая 2011

У меня есть ниже наценка на стиль. У меня есть проблема, я хочу показать только частично. Текст в .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 ]

2 голосов
/ 26 мая 2011

Вы не можете сделать это с вложением, которое вы показали здесь. Единственный способ сделать это - обернуть то, что вы хотите скрыть, как-то отдельно, например, 

<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>
1 голос
/ 26 мая 2011

Лучшим способом будет рефакторинг вашего HTML, чтобы вы могли легко выбрать часть, которую вы хотите видеть.

Однако, возможно (хотя и некрасиво) с использованием этой разметки. 

.standfirst {
   font-size: 0;   
}

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

jsFiddle .

1 голос
/ 26 мая 2011

Вам нужно будет обернуть текст чем-нибудь: 

<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; }
0 голосов
/ 26 мая 2011

Как-то так у меня работает в 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>
0 голосов
/ 26 мая 2011

Если вы скрываете родительский элемент, вы не можете отобразить внутренние элементы. Вариант ставок заключается в том, чтобы изменить вашу разметку на что-то, что будет работать, возможно, добавив другой диапазон для остальной части текста и скрыв это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...