Question

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

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

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

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

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

Answer 1

您可以考虑使用let a = "551230(95.169%)".split("(")[1].split("%")[0] console.log(a)而不是ellipsis：

clip

.test {
  white-space: nowrap;
  width: 44px;
  overflow: hidden;
  text-overflow: clip;
  border: 1px solid #000000;
}

.test2 {
  width: 44px;
  overflow: hidden;
  border: 1px solid #000000;
}

.test2>span {
  display: block;
  width: calc(100% + 10px);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

更新

您也可以考虑使用<div class="test">HelloWorld!</div> <div class="test2"><span>HelloWorld!</span></div> <div class="test2"><span>Sometext</span></div> <div class="test2"><span>Myname</span></div>，但在这种情况下，您还需要设置一个固定高度：

word-break

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

Answer 2

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

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

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

2 个答案: