单词结束后的CSS省略号

Question

我正在显示带有省略号的文本。在我当前的CSS中，省略号表示断字。

我需要在单词补全后显示省略号以确保适当的可读性。

以下是我的CSS

.myContainer {
  text-overflow: ellipsis;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 15px;
}

<div class="myContainer">
  Testing the dataset in path oregon location should done
</div>

我不想更改容器的宽度。单词位置未显示。

省略号应在位置字后显示（完整）

Answer 1

截至 2019 年，您无法使用纯 CSS 来做到这一点。这有两个原因：

1. 您无法使用纯 CSS 定位文本节点，因此您无法使用 CSS 检测是否有空格来注入省略号。CSS 属性“text-overflow”仅在发生溢出的地方放置省略号，如您的示例所示。
2. 您也无法直接使用 CSS 定位或检测溢出。您可以使用 JavaScript 尝试多种技巧，但浏览器并没有公开任何直接方法来准确查看溢出中断发生的位置。