Is the ellipsis in your Japanese font centered in the line? Here is the solution.

#ellipsis #css #scss #webdev

Hey fellow software developers, have you ever worked with Japanese fonts (or other special fonts) and encountered the issue where the ellipsis in line breaks is centered? For example, as shown below:

Code
Here are 2 solutions for you:

1. Cut the string and add 3 dots.

The interesting thing is that only the browser's ellipsis has this issue, while typing three dots manually doesn't cause any problems. Therefore, we can cut the string at a fixed number of characters and then add three dots. However, I don't recommend this approach. Its advantage is that it will definitely work. But the disadvantage is that the length of each character varies, so if we cut at the same number of characters, the items will have different lengths. This makes our webpage look unattractive. Moreover, if the technical requirement is to cut at a certain number of lines, it is difficult to determine the number of characters to cut to fit the number of lines. Not to mention other issues such as different devices, different screen widths, etc.

2. Replace the font of the ellipsis.

Here is the solution

@font-face {
  // Font name, you can name it whatever you want
  font-family: 'ellipsis-font';

  // get the font locally, you can replace it with any font you want 
  src: local('Times New Roman');

  // only override the ellipsis, here is the unicode for the ellipsis
  unicode-range: U+2026;
}

.your-text-class {
  font-family: 'ellipsis-font', ... // insert your default font-family here
}

Result:

Code

The advantage of this method is that the length is cut very flexibly, and you can combine it with -webkit-line-clamp to customize the number of lines. The disadvantage is that if the user's local machine doesn't have the font you used, the ellipsis will still appear centered in the line.

Top comments (3)

Jon Randy 🎖️ • Jun 18

This is not really an 'issue' - in Japanese punctuation, the ellipsis is usually near the vertical middle. Your solution is potentially creating, not solving a problem.

Unlike the English ellipsis, the Japanese version typically hovers around the vertical middle of the line, instead of sitting at the bottom (though they can be formatted that way, as well). There can be as few as two ‥ or as many as six or more …… . They can symbolize the passing of time, silence, or a pause. They also convey silent emotion, which you'll recognize if you read a lot of anime and manga. Finally, you may also see them in text to symbolize long vowels or an omission or missing content.

Source: tofugu.com/japanese/japanese-punct...