Add dot dot dot without using ellipsis in css

I am working in an app using Japanese and the ellipsis is awkward when using a specific font-family and text-overflow: ellipsis. I do not want to change the language or the font family, but I need to add '...' at the end when overflow hidden occurs.

As you can see in the next picture, text-overflow: ellipsis gives a strange ellipsis when using lang='ja' and a font-family: 'Meiryo', 'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;.

I tried:

   text-overflow: '...';
   overflow: hidden;

but it only works in Firefox and not in Chrome.

I also tried style.less

  .myClass {
   overflow: hidden;
   &::after {
      content: '...';
      }
  }

But I cannot see the dots at the end. Also I think this approach will not work because it will still show when I the overflow does not occur.

Is there a way to solve this problem and show '...' without using text-overflow: ellipsis property?

Thank you.

It would likely be not robust to reimplement your own version of an ellipsis replacement without careful consideration. Instead, you should still use text-overflow: ellipsis; but change the font used specifically for drawing the ellipsis.

You'll want to define a one-character font in your CSS (details below), then set it as the primary font for your text. Then use your existing Japanese font as the second font in the list, so every character except the ellipsis falls back to that.

font-family: YourEllipsisOnlyFont, YourOriginalFont, sans-serif;

To define the font, this answer in another thread (as pointed out by OP in a comment to this answer) suggests the right approach involving unicode-range: U+2026; in the @font-face declaration. You should be able to reuse the url() of any web font already loaded on the page, or a local() font.

If you want to pick a special font just for its ellipsis, you will want to ensure you load it efficiently. Some web font APIs offer the choice of specific characters. If you want to grab one from Google Fonts, add &text=… to the end of your URL query. If you're using a custom font, or want to really try to keep the file size down, there are probably tools you can find for subsetting font glyphs yourself which may offer more control.

Serving it from your own server, or ideally base64-encoding the one-glyph font file, would yield better loading performance than calling the Google Fonts API. You can, for example, open <https://fonts.googleapis.com/css?family=Inconsolata&text=…> which returns some short font definition CSS. Visit the font file URL contained within to download it (this one is 3.5 KB). You can drag the font file into FontDrop! to view what glyphs and other metadata are included. (Bookmark that site, it's handy!) If you're happy with that font file, you can use any of various sites like this one to encode it as base64. Then grab the original CSS font definition and replace the URL with the base64 one.