单词结束后的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. 你can't target text nodes with pure CSS，所以你无法用CSS检测是否有空间可以注入省略号。 CSS 属性“text-overflow”只是将省略号放置在发生溢出的地方，如您的示例所示。
2. 您也不能直接使用 CSS 定位或检测溢出。有a number of hacks you can try with JavaScript，但浏览器并没有提供任何直接的方式来查看发生溢出中断的确切位置。

Answer 2

text-overflow: ellipsis; 不能这样工作，你可以使用 js 或其他后端编程来实现这一点。此外，这取决于您的页面是否具有响应性，那么您必须相应地决定要显示的字数，因为 JS 会是更好的选择

下面是一段使用 c# 的代码，它将标题与最后一个单词放在一行中，并根据需要修剪为文本以显示单词

示例：The quick brown fox jumps over the lazy dog

The quick brown fox ....

而不是

The quick brown fox ju....

   protected string getTitle(object title)
    {
        string sTitle = title.ToString();
        if (sTitle.Length > 22)
        {
            var index = sTitle.Substring(0, 21);
            sTitle = index.Substring(0, index.LastIndexOf(' ')) + "...";
        }
        return sTitle;
    }

Answer 3

如果您可以更改标记，则解决方案将是这样的。灵感来自 לבנימלכה 找到的问题的答案，虽然这比必要的更复杂。

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

.myContainer>span {
  display: inline-block;
}

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

编辑：这适用于 Chrome 77（金丝雀），但不适用于 Chrome 75。其他浏览器都可以。