Change the contents of an ellipse overflow

Question

The client sent me a font where the symbol "..." is not defined (it displays only mirror inverting "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

In fact, you can set the text-overflow value to a string, for example:

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

But:

• It has terrible browser support (only in Firefox and possibly edge)
• Only the CSS editor specified in the project for , so it could be deleted / changed.

In a draft, he even says:

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

Basically, do not use a string value.

Because of this, I would just use a class if the overflow should not be dynamic, or JS if it is.

Js solution

 var p = document.querySelector(".js-overflow"); if (p.scrollWidth > p.offsetWidth) p.classList.add("has-overflow"); while (p.scrollWidth > p.offsetWidth) { 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"> Testing overflow yaya look at me ! </p> 

The JS solution is actually very simple.

• Make sure that the scroll width of the items is larger than the actual width (which means overflow)
• Loop by removing the last character while the scroll width with the contents of the after pseudo-elements is less than the width.