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做到这一点。这有两个原因：

您can't target text nodes with pure CSS，因此您无法使用CSS来检测是否有空格插入省略号。 CSS属性“ text-overflow”仅将省略号放在发生溢出的位置，就像您的示例一样。
您也无法直接使用CSS定位或检测溢出。有a number of hacks you can try with JavaScript，但是浏览器只是没有公开任何直接的方法来确切看到溢出中断发生的位置。

Answer 2

如果您可以更改标记，解决方案将是这样。灵感来自לבנימלכה发现的问题的答案，尽管这个问题比必要的要复杂得多。

.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中无效。其他浏览器都可以。

Answer 3

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;
    }

单词结束后的CSS省略号

3 个答案: