첫 번째 및 마지막 문자를 숨기려면 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

문제를 해결하려면 흰색 배경을 가진 선택기를 before와 after 사용하여 "#"위에 올리십시오.

또 다른 해결책은 다음과 같이 하위 범위를 추가하는 것입니다 :

이

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

CSS :

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