Easy way to add a closing quote in an ellipsized over-flowed text

Question

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!

This is the only way I found [Change the three dots (ellipses) (…) to custom characters](http://stackoverflow.com/questions/4455564/change-the-three-dots-ellipses-to-custom-characters-in-vb-net-datagridvi) or [Replace Excerpt Ellipsis with Permalink](http://css-tricks.com/snippets/wordpress/replace-excerpt-ellipsis-with-permalink/) — Flowen, May 17 '13 at 07:51
I found a related question and seems like there's no CSS solution to it: [link](http://stackoverflow.com/questions/9793473/text-overflow-ellipsis-on-left-side) — Jacob, May 17 '13 at 09:25

andyb · Answer 1 · 2016-07-31T11:04:13.037

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

Thanks @PhilipMurphy it seems that `` is no longer working in the year since my last update — andyb, Jul 31 '16 at 11:05

score 0 · Answer 2 · answered Sep 08 '18 at 16:39

Here is an example of how I solved a similar problem, using :before and :after pseudo-selectors to make it work:

.truncate {
  position: relative;
  white-space: nowrap;
  word-wrap: break-word;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  max-width: 150px;
  padding-right: 7px; /* adjust based on font size */
}
.truncate:before {
  content: "\"";
}
.truncate:after {
  content: "\"";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

<html>
  <body>
    <div class="truncate">The quick brown fox jumps over the lazy dog</div>
  </body>
</html>

this doesn't satisfy the final result required by the OP. – Zeeshan Adil Sep 08 '18 at 17:00 — Zeeshan Adil, Sep 08 '18 at 17:00

Easy way to add a closing quote in an ellipsized over-flowed text

2 Answers2