How to limit the character count in CSS

Question

I am creating a multilingual website where the plugin in I am using only provides the option to show the language name entirely. I want to limit the character count to only 3 characters. Example: If the language is English I only want to display it as ENG, When it's Vietnamese it will be VIE.

I already tried

span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50px;
  display: inline-block;
  text-transform: uppercase;
  font-size: 15px;
}

<p>
  <span>English</span>
</p>
<p>
  <span>Vietnamese</span>
</p>

I don't want the ... appear with the first three letters and setting a width or max-width is not effective to show only 3 characters in some languages as you see in the above snippet. Is there are any alternative approaches there? Let me know, please.

Related. https://stackoverflow.com/questions/26973570/setting-a-max-character-length-in-css/26975271#26975271 — Paulie_D, Dec 12 '20 at 07:54

Mister Jojo · Answer 1 · 2020-12-12T12:22:03.050

0

that ? with font-family:monospace;

span {
  font-size      : 30px;
  display        : inline-block;
  width          : 3ch;
  font-family    : monospace;
  overflow       : hidden;
  text-transform : uppercase;
}

<p>
  <span>English</span>
</p>
<p>
  <span>Vietnamese</span>
</p>

edited Dec 12 '20 at 12:22

answered Dec 12 '20 at 03:26

Mister Jojo

20,093
6
21
40

Wow. This one is cool, but another problem raises here. I am using the Oswald font in the website theme. Monospace replaces it – Ramesh Dec 12 '20 at 03:57
with monospace font you have to use `width:3ch` – Temani Afif Dec 12 '20 at 11:22
@TemaniAfif thank you, I forgot this unit – Mister Jojo Dec 12 '20 at 12:24
1

@Ramesh You can't have your cake and eat it too. – Mister Jojo Dec 12 '20 at 12:33

How to limit the character count in CSS

1 Answers1