It is annoying that in Safari/Chrome the ellipsis is treated differently from the normal text if I have this CSS:
.txt {
text-shadow: 10px 10px 1px #000;
text-overflow: ellipsis;
overflow: hidden;
display: block;
width: 100px; /* too small for the whole text, so the ellipsis shows */
color: rgba(255,0,0,0.2);
}
You’ll see that the ellipsis in the drop shadow is almost transparent just like the actual (red) text, while the rest of the text in the drop shadow is 100% opaque. Is this a bug? Is there a workaround by styling the ellipsis separately? Is that possible?
Firefox is doing fine here.