最初と最後の文字を隠すcontentEditable DIVのボックスサイジング

Question

私は最初と最後の文字を隠す必要があるContentEditable divを持っています。レイヤーは文字#の上にオーバーレイし、文字#のようにし、その下の境界線も存在しないようにする必要があります。

EG：<div contentEditable="true"># HI CONTENT! #</div> は実際のHTMLですが、ブラウザにはHI CONTENT!と表示されます。 #文字はどちらの側でも背景に混ざります。だから、私はbox-sizing: border-boxを使ってみましたが、どちらのサイズでもdivのサイズが増えるようです。

最後に、#の文字が赤い背景（この場合、白の親の背景である必要があります）の内側に表示したいと考えています。

div { 
 
    display: inline-block; 
 
    border-bottom-style: groove; 
 
    box-sizing: border-box; 
 
    border-right: 20px solid #f00; 
 
    border-left: 20px solid #f00; 
 
}

<div contentEditable="true"># HI CONTENT! #</div>

すべてのヘルプは高く評価されています。ありがとう。

Answer 1

あなたは異なるアプローチを取ると希望を達成するために:beforeと:afterセレクタを使用することができます結果：

div { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom-style: groove; 
 
    box-sizing: border-box; 
 
    /*border-right: 20px solid #f00;*/ 
 
    /*border-left: 20px solid #f00;*/ 
 
} 
 

 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 10px; /* adjust to your needs */ 
 
    height: 100%; 
 
    background: #f00; 
 
    opacity: .5; /* just to see its position */ 
 
} 
 

 
div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 10px; 
 
    height: 100%; 
 
    background: #f00; 
 
    opacity: .5; 
 
}

<div contentEditable="true"># HI CONTENT! #</div>

Answer 2

問題を修正するには、白い背景のセレクタを「＃」の上に置くことができます。

別の解決策は、このようなサブ・スパンを追加することです：

<div contentEditable="true"><span># HI CONTENT! #<span></div> 

はCSS：

[contentEditable=true] { 
    overflow: hidden; 
    white-space: nowrap; 
} 
[contentEditable=true] span { 
    margin: 0 -11px; 
}