CODEWITHSUNDEEP
htmlcsscontenteditable
Nandu Kalidindi
Nandu Kalidindi

Reputation: 6280

Box sizing on a contentEditable DIV to hide first and last character

I have a ContentEditable div that needs hiding of characters specifically the first and last character. A layer should overlay on top of the character# and make it look like the character# and the border line below it are not even present.

EG: <div contentEditable="true"># HI CONTENT! #</div> is the actual HTML but browser should only show HI CONTENT!. The # character should blend into the background on either side. So, far I tried using box-sizing: border-box but that seem to increase the size of the div on either size.

As a final result I would like to see # characters inside the red background(in this case, but needs to be the parent background which is white).

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>

Any help is highly appreciated. Thanks.

Upvotes: 0

Views: 118

Answers (2)

VXp
VXp

Reputation: 12068

You can take a different approach and use the :before and :after selectors to achieve the desired result:

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>

Upvotes: 1

Alexandre Dees
Alexandre Dees

Reputation: 21

to fix your problem, you can use ::before and ::after selectors with white background to put above the "#".

Another solution would be to add a sub-span like this :

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

css :

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

Upvotes: 0

Related Questions