Menu
I have a div with a text inside. If the text overflows it's div, It is shortened with an ellipsis at the end. What I want to do is to add a double-quote after it's ellipse so that it will look like this:
"The quick bro..."
Here's my code:
<html><body>
<div style="width: 100px;background: #CCCCCC;">
<div style="overflow:hidden; white-space: nowrap; text-overflow: ellipsis;">"The quick brown fox"
</div></div>
</body></html>
Is there an easy way/technique to do this or do you need to create your own custom ellipsis instead?
Thanks all!
292
asked Sep 06 '25 03:09
CSS text-overflow can be configured with custom characters, for example:
.customEllipsis {
overflow:hidden;
white-space: nowrap;
text-overflow: '…"';
}
However, support is experimental and the above example will currently only work in Firefox.
For cross-browser support you will have to modify the output in PHP (since the question is tagged with PHP) on the server or with JavaScript on the client.
Update 2015-07-29 text-overflow is now fully supported by all modern browsers.
Update 2016-07-01 It is possible that moving to the Blink web engine broke this as I would have tested it on Chrome - see this Blink defect. Also it doesn't look like it works in Edge.
So there is currently no cross-browser solution using text-overflow: <string>. It gets worse because the <string> functionality is marked "at risk" so it could be dropped if "interoperable implementations are not found".
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
