Ist dieses CSS akzeptiert und gut definiert oder ein fehleranfälliger Hack?

Question

Versteckt ein <br /> Tag mit CSS eine gut definierte Möglichkeit, Zeilenumbrüche von der Definition des CSS-Stils des Tags abhängig zu machen? Ist es über Browser hinweg portierbar? Wenn ich es zeigen möchte, ist "Inline" der beste Display-Typ?

folgende CSS und HTML Angesichts

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

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

Ich erwarte, um zu sehen:

abra 
ca 
dabra 

Ändern der vielleicht versteckt maybe-hidden {display:hidden} sein, erwarte ich

abracadabra 

zu sehen EDIT:

Ich schätze die Antworten darüber, wie man das besser macht. Was ich vielleicht nicht sagen konnte ist, dass dies in generiertem HTML wäre, und es wäre nicht machbar, die CSS-Klasse des tatsächlichen Elements zu ändern, wie einige vorgeschlagen haben.

Es ist aber möglich, die Definition des Stils zu ändern, ebenso wie die Klasse des übergeordneten/umschließenden/enthaltenden HTML-Elements.

Deshalb musste ich wissen, ob das klar definiert war. Während ich eine Antwort akzeptiere, die diese Frage beantwortet, bedeutet das in keiner Weise, dass ich denke, dass die Antworten, die vorschlagen, die Klasse zu ändern, "falsch" sind; Sie sind einfach nicht machbar in meiner Situation.

Answer 1

Persönlich denke ich, es ist besser, zwei CSS-Klassen (z. B. "versteckt" und "gezeigt") zu erstellen, um dann die Klassen des DOM-Elements dynamisch zu ändern.

Wenn Sie besorgt sind über das Ändern alle < br> -Tags auf einmal, können Sie einen Selektor basierend auf ihren Behälter:

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> 

Und dann verwenden Sie JS, um die Klasse div zu ändern.

Answer 2

Sie können das "display: inline" vollständig entfernen. Nichts zwischen den Klammern zu haben wird Ihre Klasse "undefiniert" machen und dem < br> tag seine übliche Bedeutung geben.

Answer 3

Ich würde diese Methode der bedingten Zeilenumbrüche nicht verwenden. Wenn die Möglichkeit besteht, dass es sich um eine einzelne Zeile oder mehrere Elemente handelt, verwenden Sie kein HTML-Element, das für Zeilenumbrüche verwendet wird, und verhindern Sie dies, verwenden Sie jedoch das gewünschte CSS. Dies könnte:

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

und macht sie entweder display:inline; oder display:block;.

Sie könnten auch Schwimmer verwenden, aber das verursacht Nebenwirkungen wie Float Clearing, die nichts zu Ihrer spezifischen Situation hinzufügen. Am besten verwenden Sie die korrekten (semantischen) HTML-Tags und die richtigen Klassennamen und CSS, um das gewünschte Markup zu erhalten.

Siehe auch: http://tantek.com/log/2002/12.html für einige Ideen zu diesem Thema.

Answer 4

Es sollte in allen Browsern funktionieren. Ich würde keine Standardanzeige für die Klasse festgelegt überhaupt aber:

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

ich die offensichtlich ungültig display:default in Kommentaren in der -show Klasse gehören die Absicht der Klasse zum Ausdruck bringen (verwenden Sie die Standardeinstellung des Elements display).

Dann können Sie einfach die Klasse für das Element mit jQuery oder plain JavaScript tauschen.