Скрытие парафилетических объектов в CSS

Я пытаюсь стилизовать элементы веб-страницы, над которыми у меня нет контроля (думаю, пользовательский текст). У меня есть кусок HTML, как так:Скрытие парафилетических объектов в CSS

<dt> 
    <a href="..." class="important-link">important text</a> 
    Long unimportant text that doesn't matter to me. 
    <a href="..." class="unimportant-link">this doesn't matter either</a> 
</dt>

Как я могу скрыть все в dt, кроме важного звена? Я хотел бы установить отображение на none, но как только dt не отображается, он не может повторно отображать свои дочерние элементы. Я не просто хочу, чтобы текст был visibility:invisible, так как он длинный (все дело в том, чтобы сократить прокрутку).

Любые идеи?

источник

2013-12-19 Charles

Вы можете установить размер шрифта в dt для 0 (чтобы скрыть текстовый узел), скрыть .unimportant-link, а затем повторно установить размер шрифта на .important-link (чтобы переопределить размер шрифта 0, который он иначе наследовал).

dt { 
    font-size: 0; 
} 

dt .unimportant-link { 
    display: none; 
} 

dt .important-link { 
    font-size: 16px; 
}

в качестве альтернативы Вы можете использовать visibility: hidden;, если вы хотите, чтобы места, занимаемого .unimportant-link остаться (а не удаляя его из потока через display: none;).

Fiddle

источник

2013-12-19 15:35:10 ajp15243

Если попробовать:

dt * { 
    display: none; 
} 

dt *.important-link { 
    display: inline; 
}

источник

2013-12-19 15:30:54 ke20

Текст (очень длинный) не содержится в содержащем элементе, поэтому он не скрывает его. – Charles

Обратите внимание, что видимость: скрытые все равно зарезервируют место для скрытого объекта. Использование дисплея: ни один не зарезервирует место. http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone – tjboswell

@Charles, если вы хотите скрыть текст, вам нужно его потом перевернуть. div, p и т. д. В противном случае единственный способ скрыть это - скрыть весь dt. – tjboswell

Исходя из того, что у вас есть текстовый узел с не оберточной элемента, есть только один подход, который я вижу, который мог бы работать. Вам нужно будет установить высоту dt равным размеру шрифта вашего .important-link.

dt{ 
    height: 1em; 
    overflow:hidden; 
    } 
dt .important-link{ 
    font-size: 1em; 
    display:block; 
}

Это фактически устанавливает первую ссылку как «уровень блока», а затем «отсекает» весь оставшийся текст. Если вы хотите отменить это позже в сеансе, вы можете установить height: auto, удалить overflow:hidden или оба.

источник

2013-12-19 16:07:14 paceaux

Скрытие парафилетических объектов в CSS

ответ

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