如何用CSS实现单行省略号

Question

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

例如：

我有一个包含容器元素内链接的链接（例如<span>）。如果文本很长，它将以两行显示一个小屏幕：

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

我希望文本显示如下：

This is a very long text...

如果您为容器设置了宽度，则

text-overflow: ellipsis;有效，但在响应式设计和我的网络应用中，它没有明确指定。

这是HTML：

<div class="itm-title">
  <a href="/friendly-url-sample/">This is a very long sentence and I don't want it to wrap, I want three dots</a>
</div>

CSS或jQuery 中是否有解决此问题的解决方案？感谢。

Answer 1

您实际上并不需要width才能成为＆＃34;设置＆＃34;这里。响应式设计中的所有元素都有宽度。您可以使用以下规则来执行此操作：

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

评论：这不适用于锚点：

＆＃13;

＆＃13;

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

＆＃13;

<a href="#">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.</a>

＆＃13;

＆＃13;

＆＃13;

有效！ :)

• 没有width设置。
• 使用<a>代码。

已更新OP的代码

＆＃13;

＆＃13;

.itm-title {
  width: 150px;
}
a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

＆＃13;

<div class="itm-title">
  <a href="/friendly-url-sample/">This is a very long sentence and I don't want it to wrap, I want three dots</a>
</div>

＆＃13;

＆＃13;

＆＃13;

结果：有效！