CSS: Отображение только соответствующего подмножества DIV

Мне нужно подстроить HTML-разметку. Я не имею прямого контроля и пытаюсь показать только соответствующее подмножество div, а скрыть все остальное.CSS: Отображение только соответствующего подмножества DIV

ДИВ стилизовать

<div id="spam_and_ham_mix"> 
    Irrelevant, looooooooong text (--> should be hidden) 
    <div id="ham">Important stuff (--> should be visible)</div> 
</div>

Желаемый результат

Я хочу, чтобы только «важные вещи», чтобы показать, скрывая при этом все остальное.

первая попытка

#spam_and_ham_mix { display:none; } /* CSS-Weight 100 */ 
#spam_and_ham_mix #ham { display:block; } /* CSS-Weight 200 */

Результат: ДИВ остается полностью скрытым, не показывая ничего.

вторая попытка

#spam_and_ham_mix { visibility:hidden; } /* CSS-Weight 100 */ 
#spam_and_ham_mix #ham { visibility:visible; } /* CSS-Weight 200 */

Результат: не имеет значения текста невидима, но она по-прежнему занимает такое же место, как если бы это было видно (что в соответствии с CSS-спецификации, но не нужный результат):

вопрос

Что я могу поделать?

Я ищу решение только для CSS (если возможно).

источник

2012-07-02 Felix Alcala

Я не знаю, что вы можете что-либо сделать, не обертывая другой (непечатаемый) текст в разметке, который может быть специально скрыт, или переместить другой. –

@ Jared: Это не то, на что я надеюсь (но то, что я начал подозревать) - если это ответ, я соглашусь с этим. Но я все еще надеюсь на решение ... –

Ну, может, я слишком скоро говорил: http://jsfiddle.net/userdude/kqUUN/ Не проверял все браузеры, но в FF13, который работает. Кроме того, обычно существует несколько причин, чтобы цепочки селекторов '#id # id' вроде этого. –

ПРИМЕЧАНИЕ - Этот ответ предназначен для ситуаций, которые не могут повлиять на поисковую оптимизацию (SEO). Другими словами, таблицы стилей печати и сайты/страницы, на которых контент не должен сканироваться поисковыми системами. Выполнение того, что ниже в этих ситуациях, может привести к тому, что поисковая система определит, что сайт манипулирует контентом, что, возможно, отрицательно влияет на место поиска или приводит к некоторому запрету. У меня нет никаких доказательств, это так, но будьте осторожны, если это ваша ситуация.

Это, кажется, работает во всех браузерах я тестировал (FF13, Chrome, Opera 12, IE7-9):

#spam_and_ham_mix { 
    font-size: 0; 
} 
#ham { 
    font-size: 15px; 
}

http://jsfiddle.net/userdude/kqUUN/

ощущению "Hacky" (а не как в «- sacky "), но и отрицательные поля.

Примечание, а также, вы должны быть careful with specificity:

#spam_and_ham_mix, 
#spam_and_ham_mix .ham { 
    font-size: 0; 
} 
.ham { 
    font-size: 15px; 
}

http://jsfiddle.net/userdude/kqUUN/1/

.ham как одинокий селектор будет отменено более "конкретным" селектор, то есть другой.

источник

2012-07-02 09:53:25

Мне тоже кажется, что он взломан, но он работает в IE9, Chrome20 на OSX и Win64 и FF. Любые идеи, что делать, когда нерелевантная часть - это не только текст, но и кнопка img, или кнопка отправки и т. Д.? –

Установить элементы 'display: none'. Другие, если это не работает, вы можете установить их 'height' /' width' в '0'? То, что вы пытаетесь выполнить, по своей сути нарушается тем, как структурирована разметка, и тем, что вы продемонстрировали, является текстом. Независимо от того, что вы применяете в родительском объекте, вы должны обратить вспять в ребёнке, если хотите распечатать его, что может быть проблематичным. Если вы можете, включите класс 'noprint' в элементы родителя, который вы хотите скрыть, и установите его на' display: none'. –

@FelixAlcala - Не «отлично», но вы можете что-то сделать в этих строках для элементов для детей, вам просто нужно будет завершить его (обратитесь к сценарию сброса для списка элементов): http://jsfiddle.net/userdude/kqUUN/17/Я думаю, что класс 'noprint' будет работать лучше. –

Здесь вы идете: http://jsfiddle.net/kqUUN/12/

Единственная проблема есть, вы должны установить высоту #spam_and_ham_mix вручную, что вы хотите. Надеюсь это поможет.

источник

2012-07-02 10:04:34 Vexter

Ну, вы могли бы это сделать, но он будет работать только в том случае, если родительский элемент уже имеет ту же высоту; если нет, то у вас есть проблемы. OP упомянул длинный текст, поэтому: http: // jsfiddle.net/userdude/kqUUN/13/ –

Да, но именно поэтому я сказал, что ему придется устанавливать высоту вручную. Смотрите: http://jsfiddle.net/kqUUN/15/ – Vexter

Я думаю, что это не оптимально. –

Поскольку вы упомянули изображения и такие, возможно, подход, как это может работать для вас:

http://jsfiddle.net/lollero/nYFWw/

CSS:

#spam_and_ham_mix { 
    visibility: hidden; 
    height: 0px; 
    position: relative; 
    overflow: visible; 
} 
#spam_and_ham_mix #ham { 
    visibility: visible; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
}

HTML (такой же как у вас):

<div id="spam_and_ham_mix"> 
    Irrelevant, looooooooong text (--> should be hidden) 
    <div id="ham">Important stuff (--> should be visible)</div> 
</div>

Вы можете установить #spam_and_ham_mix { width: 0px; }, но тогда вы, скорее всего, захотите дать #spam_and_ham_mix #ham ширину.

источник

2012-07-02 10:07:07 Joonas

Ну, это взломать, но более или менее работает. Интересно, что переполненный контент по-прежнему будет виден, если родительский элемент не является. –

@JaredFarrish Да, на самом деле не работает так хорошо, если есть другой контент под видимым содержимым, показанным на примере OP. Если вы не дадите '# spam_and_ham_mix' статическую высоту ..: / – Joonas

CSS: Отображение только соответствующего подмножества DIV

ответ

Смежные вопросы