文本溢出 - 防止将字母剪成两半

Question

对于我的情况，我有一个固定的宽度，我可以在其中显示一个名字。如果名称太长，那么我需要剪辑/隐藏名称。

我遇到的问题是最后一个字母被切成两半，而我只想显示最后一个完整的字母。

在下面的“HelloWorld！”示例中，“W”被切成两半。相反，我需要它忽略该部分字母并只显示“你好”。这甚至可能仅使用 CSS 吗？

.test {
  white-space: nowrap;
  width: 44px;
  overflow: hidden;
  text-overflow: clip;
  border: 1px solid #000000;
}

<div class="test">HelloWorld!</div>

Answer 1

.test {
  width: 44px;
  height: 18px;
  word-break: break-all;
  overflow: hidden;
  border: 1px solid #000000;
}

<div class="test">HelloWorld!</div>