第二行CSS省略号

Question

CSS text-overflow: ellipsis能在第二行上使用吗？我在网络上找不到答案。

例如：

我想要的效果是这样的：

I hope someone could help me. I need 
an ellipsis on the second line of...

但是实际发生的情况是这样的：

I hope someone could help me. I ... 

- Reigel Gallarde

---

据我所知，省略号将出现并在元素的宽度末尾截断文本。它不会流到下一行。最好的解决方案是实现一些服务器端或客户端脚本，自动将文本修剪到特定数量的字符，然后添加省略号。我猜测客户端脚本会更好，这样你仍然可以拥有所有原始文本，如果需要的话。 - FarligOpptreden

这里有一个类似的问题： https://dev59.com/CG865IYBdhLWcg3wOb9h#13924997 - Evgeny

简而言之：只有在 WebKit 中才可能实现。 - Evgeny

我最接近实现这个目标的方法是为省略号添加一个“after”伪元素，并将其内联定位在包含文本的元素直接后面。但是，如果元素文本太长，省略号会消失，因此您必须以某种方式修剪文本，以使其可靠。 - Jonathan

Answer 1

这应该在 Webkit浏览器中 可以正常工作：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

浏览器支持情况

（该链接为英文原文）

div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

* { font-family: verdana; }

<div>
   The <b><a target='_blank' href='https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp'>-webkit-line-clamp</a></b> CSS property allows limiting of the contents of a block container to the specified number of lines. It only works in combination with the display  property set to <b>-webkit-box</b> or <b>-webkit-inline-box</b> and the <b>-webkit-box-orient</b> property set to vertical. In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines. When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.
</div>

- Skeep

---

请注意，截至本评论，-webkit-line-clamp不支持visibility: hidden。https://bugs.webkit.org/show_bug.cgi?id=45399 - Kevin

嘿，看起来不错，但对我没用。它只是在给定的行数处放置“...”，但不会截断其余文本（即使使用了 white-space 属性）。 - lemoid

为了使此功能正常工作，您可能需要添加overflow: hidden。 - Robert

这在Firefox中不起作用，gecko引擎不支持webkit。 - ZetaPR

现在在Firefox中确实可以使用这个方法了。即使不指定text-overflow: ellipsis;，也能够实现效果。 - Peter W.

Answer 2

< p >实现 text-overflow: ellipsis; 的要求是使用单行版本的 white-space （ pre ， nowrap 等）。这意味着文本永远不会到达第二行。

因此，无法使用纯CSS实现。

我在寻找完全相同的东西时的来源: http://www.quirksmode.org/css/textoverflow.html（Quirksmode ftw!）

编辑如果好的CSS神将实施http://www.w3.org/TR/css-overflow-3/#max-lines，我们可以使用 fragments （新）和 max-lines （新）以纯CSS方式完成此操作。关于http://css-tricks.com/line-clampin/的更多信息

编辑2 WebKit / Blink具有 line-clamp ：-webkit-line-clamp：2 将在第二行上放置省略号。

- Rudie

---

保持警惕，但目前看来似乎神明还没有站在我们这边：http://caniuse.com/#search=max-lines - Daniel

如何使用SaaS实现上述功能？@Rudie - Bhoomi Bhalani

-webkit-line-clamp: 3 - Muhammad Umer

Answer 3

对于支持line-clamp的浏览器（大多数现代浏览器），只需使用它，对于较旧的浏览器，则回退到1行。

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


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

浏览器支持

- Nicholas

---

CSS中的“white-space: initial;”让我受益匪浅。 - James

最好的答案质量。谢谢。 - eljefedelrodeodeljefe

在我看来，我认为这个解决方案是最佳的。现在的网站与10年前相比使用了大量JS，因此我们必须考虑性能问题。我更喜欢使用CSS进行样式设置，即使在不同浏览器之间存在小差异。 - Sergiu Mare

补充说明：如果您的内容不是文本，请确保将其设置为display:inline-block。 - Centerwork

Answer 4

我发现Skeep的回答还不够，也需要一个overflow样式：

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;

- Simon H

---

只是提一下，其他解决方案包括 -webkit-line-clamp: 3;，而问题是针对2行的，所以这个更正确。 - Juangui Jordán

Answer 5

正如其他人已经回答的那样，纯CSS解决方案并不存在。 有一个jQuery插件非常容易使用，它叫做dotdotdot。 它使用容器的宽度和高度来计算是否需要截断并添加省略号。

$("#multilinedElement").dotdotdot();

这是一个jsFiddle示例。

- Giohji

---

这个插件还提供了许多其他实用工具，比如添加“阅读更多”链接，它还可以解析URI和HTML标记。不错的发现！ - Martin Andersson

我在一个电子商务店铺中尝试了jQuery dotdotdot 1.7.3，用于限制网格分类页面上产品名称显示为两行。经过彻底测试，我们决定不使用这个插件，因为有时在进行强制刷新后，分类页面的布局会出现问题。具体情况可能因人而异。最终，我们选择了一个非常简单的原生JS解决方案：如果产品名称元素的clientHeight小于scrollHeight，则在预设边界处截断文本并添加“...”。由于预设边界的原因，有时候一些产品名称可能会稍微有点短，但整体非常稳定。 - thdoan

易于实现且运行效果优美。谢谢！ - Rachel S

尽管它的工作很不错，但不幸的是，它遭受了性能问题。如果您的项目需要多个省略号用法，请考虑其他选项。此外，这是存储库中的一句话：“因为无法提高其性能，因此不再积极维护此插件。”。 - boyomarinov

另外，如果文本在加载后动态更改，则无法正常工作 :( - Dejell

Answer 6

我使用了以下CSS属性来实现文本的行末省略：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical;

这里的-webkit-line-clamp: 3;是指在文本显示的时候，最多只显示三行的内容。

- jyotishman saikia

Answer 7

如果有人正在使用SASS/SCSS并遇到了这个问题，也许这个mixin可以帮助解决：

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

这只在Webkit浏览器中添加省略号，其他浏览器会直接截断。

- Philipp Kyeck

---

使用LESS时，我不得不将/* autoprefixer: off */更改为/*! autoprefixer: off */，否则在编译后，-webkit-box-orient: vertical;会被删除，这意味着省略号永远不会显示。 - Nathan

使用gulp任务时，我使用less和autoprefixer，并在选项列表中设置了remove:false。谢谢@nathan。 - Esger

Answer 8

如果有人尝试在 flexbox 中使用 line-clamp，那么稍微麻烦一些——特别是在使用非常长的单词时进行 torture testing。这段代码片段中唯一真正的区别是包含截断文本的 flex 项中的 min-width: 0; 和 word-wrap: break-word;。向https://css-tricks.com/flexbox-truncated-text/致敬，感谢他们的见解。免责声明：在撰写本答案时，除了 Chrome 浏览器外，浏览器支持较差。但是，事情可能已经得到改善。

.flex-parent {
  display: flex;
}

.short-and-fixed {
  width: 30px;
  height: 30px;
  background: lightgreen;
}

.long-and-truncated {
  margin: 0 20px;
  flex: 1;
  min-width: 0;/* Important for long words! */
}

.long-and-truncated span {
  display: inline;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;/* Important for long words! */
}

<div class="flex-parent">
  <div class="flex-child short-and-fixed">
  </div>
  <div class="flex-child long-and-truncated">
    <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span>
  </div>
  <div class="flex-child short-and-fixed">
  </div>
</div>

http://codepen.io/AlgeoMA/pen/JNvJdx（codepen版本）

- AlexMA

---

谢谢，对我来说，这是最好的答案。 - AbingPj

折行：断词 对我而言非常关键。 - Graham Quan

Answer 9

很遗憾，您无法使其在两行中工作！如果该元素是显示块并设置高度为2em之类的话，当文本溢出时显示省略号将会很棒！

对于单行文本，可以使用以下方式：

.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

对于多行文本，你可以使用一个Polyfill，比如在github上的jQuery autoellipsis http://pvdspek.github.com/jquery.autoellipsis/

- superlogical

---

那个插件对于它所做的事情来说太重了。它已经五年了。最好使用在另一篇帖子中提到的 dotdotdot。 - adi518

Answer 10

我不是JS专家，但我想出了几种方法可以做到这一点。

HTML代码：

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

然后使用jQuery将其截断到特定的字符数，但保留最后一个单词，方法如下：

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

结果看起来像这样：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
elementum consequat tortor et…

或者，你可以简单地将其截断到特定的字符数，像这样：

// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate').text(truncated);
}

结果看起来像这样：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
elementum consequat tortor et euismod…

希望能对你有所帮助。

这是jsFiddle链接。

- Ross Howard-Jones