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>

Browser? PC? Mac? Chrome PC it's perfect. Firefox PC it just continues no ellipsis at all. — zer00ne, Apr 10 '19 at 07:05
Nevermind, there's like a space... but it's only a character maybe a character and a half of space...it's nothing like the screenshot in OP. Oh I see it doesn't hide the overflow, it just continues after ellipse, correct? — zer00ne, Apr 10 '19 at 07:26
@HassanSiddiqui does the `...` need to be visible while user is typing or only when the input is not focused? — Aaron Sarnat, Aug 02 '21 at 07:40
@maqam7 the solution you trying to share with me, it's already available at the bottom. — Hassan Siddiqui, Aug 02 '21 at 08:17

score 7 · Answer 1 · answered Apr 10 '19 at 08:03

7

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>

answered Apr 10 '19 at 08:03

Ismail Farooq

6,309
1
27
47

Nice one I was onto a similar solution with `:focus` but had not considered the lack of `:focus`. – zer00ne Apr 10 '19 at 17:03
Thank you for the solution but there is a problem in your answer. You have to click 2 times outside then text truncated apply and ellipsis 3 dots appeared. – Hassan Siddiqui Apr 10 '19 at 20:05

score 0 · Answer 2 · edited Aug 04 '21 at 22:47

You can have 2 solutions : First is multiline and second is in Single line. Check out both snippet below :

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

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;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div contentEditable="true"></div>
</body>
</html>

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;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <div contentEditable="true"></div>
</body>
</html>

score 0 · Answer 3 · answered Aug 05 '21 at 15:46

I am not sure but I removed text-overflow: ellipsis;* as it was creating that white space issue stackoverflow answer

div[contenteditable="true"] {
  white-space: nowrap;
  width: 350px;
  overflow: hidden;
  outline: none;
  border-bottom: 2px solid #ccc;
}

div[contenteditable="true"] br {
  display: none;
}

div[contenteditable="true"] * {
  display: inline;
  white-space: nowrap;
}

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

score 0 · Answer 4 · answered Aug 09 '21 at 06:02

You can scroll the div back to the left on blur.

function scrollBack(el) {
    el.scrollLeft = 0;
}

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

div:focus {
    text-overflow: initial;
}

<div contenteditable="true" onblur="scrollBack(this)"></div>

Truncate contenteditable with extra space

4 Answers4