4

これはよくある CSS の質問のようですが、何らかの理由で答えが見つかりません。

次のコードを検討してください。

<div style="width:50px;border:1px solid #000">
    THis is a looooooooong text. and it goes on and on and on and on and on and on and on and on and on and on
    <br/>
    2nd line
    <br/>
    3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 
    <br/>
    last line
</div>

CSS のみを使用して、<br/>タグ間に垂直方向のスペースを追加したい。

line-height はコンテンツ全体で機能し、CSS を<br>(例: br{ margin:10px 0}) に添付しても (少なくとも Chrome では) 機能しないようです。

ありがとうございました。

jsfiddle

</p>

4

3 に答える 3

4 
br
{
    content: " " !important;
    display: block !important;
    margin:30px;
}

これを試してください

于 2012-11-08T04:20:48.810 に答える
4

あなたはこれを試すことができます、クロムでも動作します、content: " "クロムのトリックを行います、そうでなければマージンに満足しています

デモ

HTML

<div>
    THis is a looooooooong text. and it goes on and on and on and on and on and on and on and on and on and on
    <br/>
    2nd line
    <br/>
    3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 
    <br/>
    last line
</div>

CSS

div{
    width:150px;
    border:1px solid #000;
    padding:5px;
}

br {
  content: " ";
  display: block;
  margin: 10px;
}

</p>

于 2012-11-08T04:21:35.473 に答える
1

はい、可能です。理解する必要がある関連する問題がいくつかあります。

1) マージンを使用しています。コンテンツによっては、余白が折りたたまれたり削除されたりすることがあります。代わりにパディングを使用してみましたか? 異なる結果が得られます。手元に直接リンクはありませんが、ググって、マージンとパディングの重要な違いを理解していることを確認してください。

2) ボックスモデルについて学びます。box-model: border-box について知らない場合は、勉強する必要があります。css-tricks.com の Chris Coyier の記事があります。このような問題に直接関連するため、指摘しています。

3) display:block 確かなことはわかりませんが、
おそらくデフォルトで display: inline になっていると思います。プロパティの 1 つとして display: block を設定すると、任意の要素を常に標準のブロック DIV のように動作させることができます。繰り返しになりますが、Chris Coyier がこれに関する素晴らしい情報を提供しています。display: ルールとその注意点を深く理解していることを確認してください。

display: block を追加するだけで、マージンまたはパディングを使用するだけで問題が解決します。そうでない場合は、単に私が見逃しているばかげたものがあります。私は以前にこの種のことをしたことがあります。
実際、 display: none を使用して Wordpress のテーマ マークアップからタグを完全に削除し、画像ギャラリーの出力を完全に再フォーマットしました。

于 2012-11-08T04:23:03.367 に答える