Add dot dot dot without using ellipsis in css

Question

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.

Answer 1

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 the font used specifically for drawing the ellipsis.

You can import a subset of a font with an ellipsis you like. Some font APIs like Google Fonts may offer the choice of specific characters— but be careful not to let a cached version of the font get used in place of the subset version on users' browsers that already loaded the full font from another website. You could, for example, request the subset from Google Fonts then download that file and serve it yourself instead of using their API. There are other tools available for subsetting font files as well.

Set that font, with only a single character code point, to the primary font. 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: EllipsisOnly, OriginalFont, sans-serif;