如何删除最后一个可见单词和省略号点之间的多余空格？

如何解决如何删除最后一个可见单词和省略号点之间的多余空格？

我正在使用 CSS 使用省略号方法修剪句子。

对于句子

This is a test sentence grammatically correct.

我得到的结果是这样的：

This is a test sentence ...

上面的结果是因为省略号是从单词“grammatically”开始的，前面有一个空格。我想要做的是，无论省略号是否在空格后为新单词开始，最后一个可见单词（此处为“句子”）和省略号之间都不应该有任何空格。

我想要这个：

This is a test sentence...

有可能吗？

p {
      white-space: nowrap;
      overflow: hidden !important;
      text-overflow: ellipsis;
    }

<p>This is a test sentence grammatically correct.</p>

注意：句子是动态变化的。因此，我不能使用像 158px 这样的固定宽度代替 160px 或类似的东西，因为每个单词的长度都不同。例如，158px 可能适用于上述句子，但如果最后一个可见单词是“the”而不是“sentence”怎么办？在这种情况下，158px 固定宽度将不起作用，因为我需要降低很多。因此，这里需要一个动态解决方案，无论句子或最后一个可见单词是什么，都可以抑制空间。

解决方法

您能否尝试重现以下代码段中的间距问题？

p {
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 120px;
}

<p>
This is a test sentence </p>

,

我修改了我的答案。

我已将宽度更改为 25%，您可以根据自己的需要进行调整。您也可以将其调整为@media 响应能力。

第一个 <span> 是您将要显示的区域。

需要注意的一点，如果您不想削减单词，请将字符限制在一定数量的字符内。最后应该为椭圆留出足够的空间，因此请相应地计算字符长度。

希望它对你有用。

.dynamic {
  width: 25%;
  height: 1.1em;
  overflow: hidden;
}
.dynamic > span {
  display: inline-block;
  position: relative;
  white-space: pre;
}
.dynamic > span::after {
  position: absolute;
  content: "…";
}
.dynamic > span:last-child::after {
  content: "";
}

<div class="dynamic">
<span>This is a test sentence</span> <span>gramatically correct.</span>
</div>