HTMLのテキスト内のBRタグの高さ

私は、編集可能なページとコンテンツを持っています。これはテキストのブロックと段落間の区切りとしての
タグで構成されています。私はHTMLのテキスト内のBRタグの高さ

br { 
    display:block; 
    margin-top: 15px; 
    content: " " 
}

ではなく行に複数のBRタグが崩壊している。この場合には、より大きな段落やI found溶液との間の距離を作りたいです。また、私は行の高さで解決策を見つけましたが、この場合は空の行にカーソルが奇妙に見えます。 pタグを使用することはできません。他の解決方法はありますか？

body { 
 
    display: flex; 
 
} 
 

 
.first { 
 
    margin-right: 30px; 
 
} 
 

 
.first br { 
 
    display: block; 
 
    margin-top: 15px; 
 
    content: " "; 
 
} 
 

 
.second br { 
 
    display: block; 
 
    margin-top: 15px; 
 
    line-height: 50px; 
 
}

<body contenteditable="true"> 
 
    
 
    <div class="first"> 
 
    <h3>display:block solution</h1> 
 
    Lorem ipsum dolor sit amet 
 
    <br> 
 
    Lorem ipsum dolor sit amet 
 
    <br> 
 
    <br> 
 
    Lorem ipsum dolor sit amet 
 
    </div> 
 
    <div class="second"> 
 
    <h3>line-height solution</h1> 
 
    Lorem ipsum dolor sit amet 
 
    <br> 
 
    Lorem ipsum dolor sit amet 
 
    <br> 
 
    <br> 
 
    Lorem ipsum dolor sit amet 
 
    </div> 
 
</body>

出典

2017-01-26 Boris Parnikel

これは**の段落**です。 –

が、この場合に一列に複数BRタグはマージンを崩壊の影響を回避するために、透明な境界トップを追加してみてください

に折りたたまれています。最初の例では、少なくともクロムを第二と第三の線との間の二重線の高さを達成

body { 
 
    display: flex; 
 
} 
 

 
.first { 
 
    margin-right: 30px; 
 
} 
 

 
.first br { 
 
    display: block; 
 
    margin-top: 15px; 
 
    border-top: 1px solid transparent; 
 
    content: " "; 
 
} 
 

 
.second br { 
 
    display: block; 
 
    margin-top: 15px; 
 
    line-height: 50px; 
 
}

<body contenteditable="true"> 
 
    
 
    <div class="first"> 
 
    <h3>display:block solution</h1> 
 
    Lorem ipsum dolor sit amet 
 
    <br> 
 
    Lorem ipsum dolor sit amet 
 
    <br> 
 
    <br> 
 
    Lorem ipsum dolor sit amet 
 
    </div> 
 
    <div class="second"> 
 
    <h3>line-height solution</h1> 
 
    Lorem ipsum dolor sit amet 
 
    <br> 
 
    Lorem ipsum dolor sit amet 
 
    <br> 
 
    <br> 
 
    Lorem ipsum dolor sit amet 
 
    </div> 
 
</body>

。 Firefoxは最初はこの問題を抱えていないようですが、両方の例が同じように見えます。 Internet ExplorerとEdgeをテストしていない。

しかし、これはやや誤りがあり、エラーを起こしやすいソリューションです。適切なパラグラフ要素を使用することはできませんが、そうでなければあなたのコンテンツ編集システムは...できます。これは単に見た目の問題だけでなく、セマンティクスや検索エンジンのランク付けなどでもあります。

出典

2017-01-26 09:43:24 CBroe

ありがとうございます。私たちはCKeditorを使って、なぜ私は歴史的に** br **アプローチが選択されたのか分かりません。もちろん、** p **の方が良いかもしれません... –

あなたの解決策には別の問題があります。第3段落の前に空行にキャレットを移動し、何か入力を開始します。 2番目の段落の末尾に表示されます... –

ええ、クリックしてからカーソルを一回押してから、入力を開始する必要があります。実際の問題を修正する代わりに、回避策を試してみると起こります（適切な段落を生成するためにCKeditorを構成してください）。 – CBroe

HTMLのテキスト内のBRタグの高さ

答えて

関連する問題