如何限制CSS中的字符数

Question

我正在创建一个多语言网站，其中我使用的插件仅提供完全显示语言名称的选项。我想将字符数限制为仅 3 个字符。示例：如果语言是 English 我只想显示为 ENG，当它是 Vietnamese 时它将是 VIE.

我已经试过了

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>

我不希望... 出现在前三个字母中，并且设置width 或max-width 在某些语言中仅显示3 个字符是无效的，正如您在上面的sn-p 中看到的那样。那里有其他方法吗？请告诉我。

Answer 1

那个？ 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>