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

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>