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

【问题标题】：How to remove extra space between the last visible word and ellipsis dots?如何删除最后一个可见单词和省略号点之间的多余空格？
【发布时间】：2021-09-20 12:02:25
【问题描述】：

我正在使用 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;
    }

&lt;p&gt;This is a test sentence grammatically correct.&lt;/p&gt;

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

【问题讨论】：

您是否希望省略号始终从单词边界开始？

标签： html css ellipsis

【解决方案1】：

你能尝试在下面的 sn-p 中重现间距问题吗？

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

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

【讨论】：

在您回答后我意识到了一些重要的事情，我已经更新了问题。请看一看。
知道了，所以空间来自您的文本输入本身
我想是的.. 我希望用 CSS 来限制这个空间。
文本会是动态的吗？还是只是静态文本？因为，使用 css，我们无法检查空格并消除（如果有）。
动态的.. 它会不时改变。这是一条短信。

【解决方案2】：

我修改了答案。

我已将宽度更改为 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>

【讨论】：

我认为这不是一个动态的解决方案，因为每个单词的长度都不同。如果最后一个词不是“句子”，而是“是”怎么办？在那种情况下，158px 不可能是一个精确的解决方案。
@RelaxingMusic 我昨天修改了我的答案。你检查了吗？
你指望我怎么把一个动态句子分成这样的两部分？这是不可能的！
你不是在写自己的句子吗？将代码添加为文本格式（如 html）并为其提供您的类。
我想你需要再看看我的问题。请查看“注意”部分。