Question 244084 in Html Question posted in
Some basic documentation can be found here.

Html – Why does contentedible div with truncation add whitespace in Chrome when constrained

So I have a setup like this:

<div style="width:130px; background-color:lime">
   <div contentEditable style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
      Hi I am a long piece of text, well sort of long lalalaa
    </div>
</div>

At first this seems to work correctly but after I start typing more text than fits, it just adds whitespace and moves the ellipsis left. I am not sure what is causing this or how to make the caret move right with the text.

Example of problem

Tags:

2

Answers


  1. 0

    It looks like Chrome cannot correctly display the combination of the contentEditable feature and the text-overflow: ellipsis; attribute. One approach would be to remove ellipsis if the focus is on it.

    (Credits to @somethinghere for the addition onblur="this.scrollLeft = 0")

    [contentEditable]:focus {
  text-overflow: initial !important;
}
    <div style="width:130px; background-color:lime">
   <div contentEditable onblur="this.scrollLeft = 0" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
      Hi I am a long piece of text, well sort of long lalalaa
    </div>
</div>
    Login or Signup to reply.
  2. 0

    Change your width to 100%,
    Remove the overflow,
    And set the white space to wrap

    <div style="width: 100%; background-color:lime">
   <div contentEditable style=" white-space: wrap;">
      Hi I am a long piece of text, well sort of long lalalaa
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search