この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 

を見ることを期待します編集：

私はこのことをいかにうまくいかにするかについての答えを感謝します。私はおそらくこれがHTMLで生成され、実際の要素のCSSクラスを変更することは、いくつか示唆しているように、実行可能ではないということです。

しかし、の親/囲み/ HTML要素のクラスを変更するのと同じように、スタイルの定義を変更することも可能です。

これが私がこれが明確に定義されているかどうかを知る必要があった理由です。私はその質問に答えた答えを受け入れるつもりですが、クラスを変更することを示唆する答えが「間違っている」とは決して意味しません。彼らは私の状況では実現できません。

Answer 1

個人的には、DOM要素のクラスを動的に変更するために、2つのCSSクラス（例：「hidden」と「shown」）を作成する方がよいと思います。あなたが一度にすべてのあなたの< BR>タグを変更することを懸念している場合は

、あなたは自分のコンテナに基づいてセレクタを使用することができます。

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

「ディスプレイ：インライン」を削除するだけで済みます。角かっこの間に何も置かないと、あなたのクラスは「未定義」になり、< br>タグにその通常の意味が与えられます。

Answer 3

条件付きで改行を挿入するこの方法は使用しません。 1行または複数行の可能性がある場合は、行区切りに使用される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 4

ブラウザ間で問題なく動作します。でも、私は全然クラスのいずれかのデフォルトの表示を設定していないでしょう。

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

私は（要素のデフォルトdisplayを使用）、クラスの意図を表現するために-showクラスのコメントにdisplay:default明らかに無効が含まれます。

次に、jQueryまたはプレーンJavaScriptを使用して、そのクラスのクラスをスワップできます。