texto-desbordamiento cambia el contenido de elipsis

Un cliente me envió una fuente donde el carácter ‘…’ no está definido (solo aparece un ‘invertido’ invertido ‘3’). Entonces quería hacer algo como:

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

alguna idea, ¿cómo puedo hacer esto?

En realidad, puede establecer el valor de text-overflow de text-overflow en cadena, como:

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

Sin embargo:

  • Tiene un soporte de navegador horrible (solo en Firefox y tal vez borde)
  • Solo está especificado en el borrador de los editores para CSS , por lo que podría eliminarse o modificarse.

En el borrador, incluso dice:

Nota: El valor de y la syntax de 2 valores "{1,2}" y la funcionalidad están en riesgo.

Básicamente, no uses el valor de la cadena .

Debido a esto, solo usaría una clase si el desbordamiento no tiene que ser dynamic, o JS si lo hace.

Solución JS

 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: "..." } 
 

Testing overflow yaya look at me !