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