如何用CSS实现单行省略号

我希望能够在响应式设计中添加三个点并在一行中保持文本.

例如:

我有一个带有容器元素内链接的链接(例如).如果文本很长,它将以两行显示一个小屏幕:

This is a very long text
and it wraps because it's very long

我希望该文本显示如下:

This is a very long text...

text-overflow: ellipsis; 如果您已为容器设置宽度,但在响应式设计和我的Web应用程序中,它没有明确指定.

这是HTML:

  This is a very long sentence and I don't want it to wrap, I want three dots

CSS或jQuery中是否有解决方案可以解决这个问题？谢谢.

你实际上不需要width在这里"设置".响应式设计中的所有元素都有宽度.您可以使用以下规则来执行此操作:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

评论:这不适用于锚点:

a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept. Learn more about incognito browsing.