text-overflow change content of ellipsis

Question

A customer sent me a font where the '...'-character is not defined (it only shows up a mirror-inverted '3'). So i wanted to do something like:

.myclass ul li{
    text-overflow: ellipsis;
    text-overflow-content: '...';
}

any idea, how I can do this?

Answer 1

You can set the value of text-overflow to a string, like:

.myclass ul li{
    text-overflow: '...';
}

However:

• It has horrible browser support(Only in Firefox and maybe edge)
• It's only specified in the editors draft for CSS, so it could very well be removed/changed.

In the draft, it even says:

Note: The <string> value, and the 2-value syntax "{1,2}" and functionality are all at risk.

Basically, don't use the string value.

Because of this, I'd just use a class if the overflow doesn't have to be dynamic, or JS if it does.

JS Solution

let p = document.querySelector(".js-overflow");

// Add overflow class if needed
if (p.scrollWidth > p.offsetWidth) p.classList.add("has-overflow");

while (p.scrollWidth > p.offsetWidth) {
  // Remove characters from paragraph until the text and the overflow indicator fit
  p.innerHTML = p.innerHTML.slice(0, -1);
}

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;
  /* BOTH of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

.has-overflow:after {
  content: "..."
}

<p class="js-overflow">
  Simple string to test text overflow, will overflow to your custom string at 200px.
</p>

A JS solution is quite simple:

1. Check if the elements scroll width is wider than it's actual width(meaning it has an overflow)
2. Loop, removing the last character until the scroll width with the after pseudo elements content is less than the width.