171

<br/>CSSで改行タグをターゲットにすることはできますか?

改行があるたびに 1px の破線を付けたいと思います。独自の CSS を使用してサイトをカスタマイズしていますが、設定された HTML を変更できません。それ以外の場合は、別の方法を使用します。

私はそれが可能だとは思いませんが、誰かが知っている方法があるかもしれません。

4

15 に答える 15

174

BR改行を生成し、それは単なる改行です。clearこの要素にはコンテンツがないため、やなど、適用する意味のあるスタイルはほとんどありませんposition。の境界線を設定できBRますが、視覚的な次元がないため表示されません。

2 つの文を視覚的に分離したい場合は、この目的のために水平定規を使用することをお勧めします。マークアップを変更することはできないので、残念ながら CSS だけではこれを実現できません。

どうやら、他のフォーラムですでに議論されているようです。Re: CSS を使用して BR 要素の高さを設定するからの抜粋:

[T]これは、BR が通常の要素として扱われるのではなく、生成されたコンテンツ内の \A のインスタンスとして扱われるという点で、BR のやや奇妙な状態につながります。 CSS プロパティ (の限定されたサブセット) が許可されている通常の要素。

CSS 1仕様にも明確化が見つかりました（より高いレベルの仕様には言及されていません）：

現在の CSS1 のプロパティと値では、'BR' 要素の動作を説明できません。HTML では、'BR' 要素は単語間の改行を指定します。実際には、要素は改行に置き換えられます。CSS の将来のバージョンでは、追加および置換されたコンテンツが処理される可能性がありますが、CSS1 ベースのフォーマッターは 'BR' を特別に処理する必要があります。

Grant Wagner のテストBRでは、他の要素でできるようにスタイルを設定する方法がないことが示されています。ブラウザで結果をテストできるオンライン サイトもあります。

アップデート

pelms はさらに調査を行い、IE8 (Win7 上) と Chrome 2/Safari 4b では多少スタイルを設定できることを指摘しました。BR実際、IE Net Renderer の IE8 エンジンでIE のデモ ページを確認したところ、動作しました。

Update 2 c69 ではさらに調査が行われ、マーカーのスタイルをかなり重くすることができることがわかりました(ただし、クロスブラウザーではありません)。ただし、親コンテナーに属しているように見えるため、これは改行自体には影響しません。br

于 2009-05-22T18:41:11.510 に答える
57

次のことを試してください。投票数の多い別の回答のUpdate 2を使用してまとめましたが、完全に機能しました。

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}
于 2012-04-19T22:18:55.197 に答える
33

<br>タグのスタイルを設定する必要がある正当な理由が 1 つあります。

それがコードの一部であり、変更したくない (または変更できない) 場合は、この特定<br>のものを表示しないようにします。

.xxx br {display:none}

多くの時間を節約でき、時には一日を節約できます。

于 2012-05-18T11:55:58.983 に答える
22

私のコメントを見逃したかもしれない将来の訪問者のために：

br {
    border-bottom:1px dashed black;
}

動作しません。

IE 6、7 & 8、Firefox 2, 3 & 3.5B4、Safari 3 & 4 for Windows、Opera 9.6 & 10 (alpha)、Google Chrome (バージョン 2) でテストされており、いずれの環境でも動作しませんでした。彼ら。将来のある時点で、<br>要素の境界線をサポートするブラウザーを誰かが見つけた場合は、このリストを自由に更新してください。

また、他にも多くのことを試したことに注意してください。

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

それらのうち、以下は Opera 9.6 および 10 (アルファ版) で動作します (porneL に感謝します!):

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

1 つのブラウザーでしかサポートされていない場合はあまり役に立ちませんが、さまざまなブラウザーが仕様をどのように実装しているかを見るのは常に興味深いことです。

于 2009-05-22T19:07:22.677 に答える
11 
br { padding: 1px 8px; border-bottom: 1px dashed #000 }

IE8 では以下のようにレンダリングされます...ただし、1 つのブラウザーだけではあまり使用されません。

IE8 スクリーンショット

(NB IE 8.0.7100 (Win7 RC 上) を使用していますが、違いがある場合)

また、 

br:after { content: "..." }  
br { content: "" }`

また、 

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

br { content: "" }

Chrome 2 / Safari 4b では破線が表示されますが、改行が失われるため (誰かがそれを再導入する方法を考え出さない限り)、役に立たなくなります。

例:
IE8 テスト、Chrome/Safari テスト、その他

于 2009-05-24T13:51:32.530 に答える
10

あなたが HTML を編集できないのはわかっていますが、CSS を変更できるのであれば、javascript を追加できますか?

もしそうなら、あなたはjqueryを含めることができます。

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});
</script>
于 2009-05-22T19:27:34.867 に答える
1

これで問題が解決するようです。

<!DOCTYPE html>

<style type="text/css">
#someContainer br { display:none }
#someContainer br + a:before { content:"|"; color: transparent; letter-spacing:-100px; border-left: 1px dashed black; margin:0 5px; }
</style>

<div id="someContainer"><a>link</a><br /><a>link</a><br /><a>link</a></div>
于 2012-08-24T03:20:30.093 に答える
1

BR はブロック要素ではなく、インライン要素です。

したがって、次のものが必要です。

 br.Underline{
    border-bottom:1px dashed black;
    display: block;
  }

そうしないと、インライン要素には境界線、パディング、またはマージンがないため、そのようなことに少しうるさいブラウザは、BR 要素に境界線を適用することを拒否します。

于 2009-05-22T18:40:11.540 に答える
1

古い質問ですが、これはかなりきちんとしたクリーンな修正であり、それが可能かどうかまだ疑問に思っている人に役立つかもしれません:):

br{
    content: '.';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed black;
}

この修正により、Web サイトで BR を削除することもできます (幅を 0px に設定するだけです)。

于 2014-09-18T08:57:37.743 に答える
0

これは動作しますが、IE でのみです。IE8でテストしました。

br {

  border-bottom: 1px dashed #000000;
  background-color: #ffffff;
  display: block;
  }
于 2009-05-22T19:47:05.403 に答える
-2

HRタグを使用しないのはなぜですか? それはまさにあなたが望むもののために作られています. テーブルの目の前にスプーンがあるのに、スープを食べるためのフォークを作ろうとするようなものです。

于 2009-06-24T16:33:45.873 に答える