Является ли этот CSS приемлемым и четко определенным, или склонным к сбоям?

Question

Является ли скрытие тега <br /> с помощью CSS хорошо определенным способом сделать разрывы строк обусловленными определением стиля CSS тега? Это портативный через браузеры? Когда я хочу показать это, лучше ли использовать встроенный тип дисплея?

Учитывая следующие CSS и HTML,

<style type="text/css">
  .maybe-hidden {display:inline}
</style>

abra<br class='maybe-hidden' />
ca<br class='maybe-hidden' />
dabra<br class='maybe-hidden' />

Я ожидаю увидеть:

abra
ca
dabra

Изменим скрытое значение на maybe-hidden {display:hidden}, я ожидаю увидеть

abracadabra

EDIT:

Я ценю ответы о том, как лучше это сделать. Возможно, я не смог сказать, что это будет в сгенерированном HTML, и изменение класса CSS фактического элемента, как предположили некоторые, было бы невозможным.

Но возможно изменение определения стиля, как и изменение класса родительского / включающего / содержащего HTML-элемента.

Вот почему мне нужно было знать, было ли это четко определено. Хотя я собираюсь принять ответ, который ответил на этот вопрос, это никоим образом не означает, что я думаю, что ответы, предлагающие изменить класс, «неправильны»; они просто неосуществимы в моей ситуации.

Answer 1

Лично я думаю, что лучше создать два класса CSS (например, «скрытый» и «показанный»), чтобы затем динамически изменять классы элемента DOM.

Если вы хотите изменить все свои теги
сразу, вы можете использовать селектор на основе их контейнера:

CSS:

.hidden maybe-hidden
{
    display: none;
}

.shown maybe-hidden
{
    display: inline;
}

HTML:

<div class="shown">
    abra<br class='maybe-hidden' />
    ca<br class='maybe-hidden' />
    dabra<br class='maybe-hidden' />
</div>

А затем используйте JS, чтобы изменить класс div.

Answer 2

Я бы не использовал этот метод условной вставки разрывов строк. Если есть возможность чего-то, что может быть одной строкой или несколькими, не используйте элемент HTML, который используется для разрыва строки и предотвращения этого, но используйте предполагаемый CSS. Это может быть:

<span class="first">abra</span>
<span class="second">ca</span>
<span class="third">dabra</span>

и сделать их либо display:inline;, либо display:block;.

Вы также можете использовать поплавки, но это вызывает побочные эффекты, такие как очистка поплавка, которые ничего не добавляют к вашей конкретной ситуации. Лучше всего использовать правильные (семантические) теги HTML, а также правильные имена классов и CSS, чтобы получить требуемую разметку.

Также см .: http://tantek.com/log/2002/12.html для некоторых идей по этому вопросу.

Answer 3

Должно работать нормально во всех браузерах. Я бы вообще не установил отображение по умолчанию для этого класса:

.maybe-hidden-show { /* display:default; */ }
.maybe-hidden-hide { display: none; }

Я включаю явно неправильный display:default в комментарии в классе -show, чтобы выразить намерение этого класса (используйте значение по умолчанию display) элемента.

Затем вы можете просто поменять класс на элементе, используя jQuery или простой JavaScript.

Answer 4

Вы можете просто полностью удалить «display: inline». Если в скобках ничего не будет, ваш класс станет «неопределенным», а тег
будет иметь обычное значение.