Html 第二行的css省略号

CSS

文本溢出：省略号在第二行，这可能吗？我在网上找不到它

例如：

我想要的是这样的：

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

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

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

但现在发生的是：

I hope someone could help me. I ... 

它是一个非标准的CSS，当前版本的CSS中没有包含它（Firefox不支持它）。试着改用JavaScript。
我以前用过，看起来它可以做你想做的事情。如果没有，有一些可能适合你的需要

编辑：让你成为一个-注意，我在演示中链接了实现这一神奇的插件，因此完全归功于该插件的作者：）
对
文本溢出的要求：省略号
to work是一行版本的
空白
（
pre
，
nowrap
等）。这意味着文本永远不会到达第二行

因此。在纯CSS中不可能

我的来源，当我正在寻找完全相同的事情刚刚：（怪癖模式ftw！）

编辑如果好的CSS神会实现，我们可以在纯CSS中使用
片段
（新）和
最大行数
（新）。还有更多关于

编辑2WebKit/Blink有：
-WebKit线夹：2
将在第二行添加省略号。
您不能让它在两行上工作，真是太遗憾了！如果元素是displayblock，高度设置为2米或其他什么，当文本溢出时，它会显示一个省略号，那就太棒了

对于单个衬里，您可以使用：

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

对于多行，也许可以使用一个Polyfill，比如github上的jQuery autoellipsis，我不是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>

结果如下所示：

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

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

// 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，是一位杰出的献身者。莫比

侵权人等民事诉讼要件

或者，您可以简单地将其截断为特定的字符数，如下所示：

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

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

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

结果如下所示：

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

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

// 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，是一位杰出的献身者。莫比

侵权责任和赔偿责任要素

希望这有点帮助

以下是。
我以前遇到过这个问题，没有纯css解决方案

这就是为什么我开发了一个小型库来处理这个问题（以及其他问题）。该库提供用于建模和执行字母级文本呈现的对象。例如，您可以模拟文本溢出：带有任意限制的省略号（不需要一行）

阅读更多关于屏幕截图、教程和下载链接的信息。
正如其他人已经回答的那样，纯CSS解决方案并不存在。
有一个插件非常容易使用，它被称为。
它使用容器的宽度和高度来计算是否需要截断和添加省略号

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

以下是一个。
在webkit浏览器中应该可以使用：



div{
溢出：隐藏；
文本溢出：省略号；
显示：-网络工具包盒；
-webkit线夹：3个；
-网络工具包盒方向：垂直；
}
*{字体系列：verdana；}

CSS属性允许将块容器的内容限制为指定的行数。它仅与设置为-webkit-box或-webkit-inline-box的显示属性以及设置为vertical的-webkit-box-orient属性组合使用。在大多数情况下，您还需要将overflow设置为hidden，否则内容不会被剪裁，但在指定的行数之后仍会显示省略号。当应用于锚元素时，截断可以发生在文本的中间，而不一定在结尾。
我找到了一个解决方案，但是您需要知道适合您的文本区域的大致字符长度，然后加入。。。到前面的空间

我这样做的方式是：

假设一个粗略的字符长度（在本例中为200）并传递给
与文本一起运行
拆分空格，使您有一个长字符串
使用jQuery获取字符后的第一个“”空格
长度
加入剩下的
代码：

truncate = function(description){
        return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";           
}

下面是一个提琴-
如果有人在使用SASS/SCSS时偶然发现了这个问题-也许这个混音会有所帮助：

@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浏览器中添加省略号。rest只是切断了它。
我发现Skeep的回答不够，还需要一种
溢出
风格：

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

基于webkit line clamp的纯css方法，适用于webkit：


@-webkit关键帧省略号{/*用于测试*/
0%{宽度：622px}
50%{宽度：311px}
100%{宽度：622px}
}
.省略号{
最大高度：40px；/*h*n*/
溢出：隐藏；
背景：#eee；
-webkit动画：省略号ease 5s infinite；/*用于测试*/
/**
溢出：可见；
/**/
}
.省略号.内容{
位置：相对位置；
显示：-网络工具包盒；
-网络工具包盒方向：垂直；
-webkit盒包：中心；
字体大小：50px；/*w*/
线高：20px；/*线高h*/
颜色：透明；
-webkit线夹：2；/*最大行数n*/
垂直对齐：顶部；
}
.省略号.文本{
显示：内联；
垂直对齐：顶部；
字体大小：14px；
颜色：#000；
}
.省略号.覆盖{
位置：绝对位置；
排名：0；
左：50%；
宽度：100%；
身高：100%；
溢出：隐藏；
/**
溢出：可见；
左：0；
背景：rgba（0,0,0,5）；
/**/
}
.省略号.覆盖：之前{
内容：“；
显示：块；
浮动：左；
宽度：50%；
身高：100%；
/**
背景：浅绿色；
/**/
}
.省略号.占位符{
浮动：左；
宽度：50%；
高度：40px；/*h*n*/
/**
背景：浅蓝色；
/**/
}
.省略号.更多{
位置：相对位置；
顶部：-20px；/*-h*/
左：-50px；/*-w*/
浮动：左；
颜色：#000；
宽度：50px；/*的宽度。更宽*/
高度：20px；/*h*/
字体大小：14px；
/**
排名：0；
左：0；
背景：橙色；
/**/
}