Truncate contenteditable with extra space

Question

I have a simple div with contentEditable true attribute and I also apply ellipsis CSS.

The behavior of contentEditable it's fine when the content is less and not truncated.

But when you write extra content and content starts truncated it'll show extra whitespace on the right side.

div {
  border-bottom: 2px solid #ccc;  
  outline: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 5px;
  width: 350px;
}

<div contentEditable="true"></div>

Answer 1

Here is a possible solution for this. you might need to change your HTML structure little. Take a parent element and wrap your truncated element into it and play with focus attribute.

Here is an example.

div {
  overflow: hidden;
  width: 350px;
  display: inline-block;
  position: relative;
  border-bottom: 2px solid #ccc;
}

span {
  outline: 0;
  width: auto;
  white-space: nowrap;
  padding-bottom: 5px;
  display: inline-block;
  overflow: hidden;
}

span:not(:focus) {
  width: 100%;
  margin-bottom: 2px;
  text-overflow: ellipsis;
}

<div>
  <span contenteditable="true"></span>
</div>