第二行上的 css 省略号

它是一个非标准的CSS，当前版本的CSS中没有涵盖它(Firefox不支持它)。尝试使用JavaScript。

我以前使用过jQuery-condense-plugin，它看起来可以做你想做的事情。如果不是，有不同的插件可能适合你的需求。

编辑:让你一个演示 -请注意，我在演示中链接了jquery.condense.js，这是有魔力的，所以完全归功于该插件的作者:)

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 (new)和max-lines (new)在纯CSS中实现它。还有一些关于http://css-tricks.com/line-clampin/的更多信息

编辑2 WebKit/Blink有line-clamp: -webkit-line-clamp: 2将把省略号放在第二行。

太遗憾了，你不能让它工作超过两行!如果元素是显示块，高度设置为2em或其他，当文本溢出时，它会显示省略号，那就太棒了!

对于单个眼线，您可以使用:

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

对于多行，也许你可以使用Polyfill，如jQuery autoellipsis，这是在github http://pvdspek.github.com/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>

然后使用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);
}

结果如下所示:

< b>我是孤独的，神圣的，神圣的。发病原因< br > Elementum consequence tortor et…

或者，你可以像这样简单地截断它到一个特定的字符数:

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

结果如下所示:

< b>我是孤独的，神圣的，神圣的。发病原因< br >

.

.

希望这能有所帮助。

这里是jsFiddle。

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

这就是为什么我开发了一个小型库来处理这个问题(以及其他问题)。标准库提供了用于建模和执行字母级文本呈现的对象。例如，您可以模拟带有任意限制的text-overflow:省略号(不一定只有一行)

在http://www.samuelrossille.com/home/jstext.html阅读更多截图，教程和下载链接。

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

这是一个jsFiddle。

这应该工作在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>

我找到了一个解决方案，但你需要知道一个粗略的字符长度，将适合你的文本区域，然后加入一个…到前面的空格。

我是这样做的:

1. 假设一个粗略的字符长度(在本例中为200)并传递给a 函数随你的文本
2. 分隔空格，这样你就有了一根长字符串
3. 使用jQuery获取切片字符后的第一个“”空格 李长< / >
4. 加入剩下的…

代码:

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

这是一把小提琴——http://jsfiddle.net/GYsW6/1/

如果有人正在使用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浏览器中添加省略号。休息只是把它切断了。

我发现Skeep的答案是不够的，还需要一个overflow样式:

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

一个基于-webkit-line-clamp的纯CSS方法，适用于webkit:

@-webkit-keyframes ellipsis {/*for test*/
0% { width: 622px }
50% { width: 311px }
100% { width: 622px }
}
.ellipsis {
max-height: 40px;/* h*n */
overflow: hidden;
background: #eee;


-webkit-animation: ellipsis ease 5s infinite;/*for test*/
/**
overflow: visible;
/**/
}
.ellipsis .content {
position: relative;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
font-size: 50px;/* w */
line-height: 20px;/* line-height h */
color: transparent;
-webkit-line-clamp: 2;/* max row number n */
vertical-align: top;
}
.ellipsis .text {
display: inline;
vertical-align: top;
font-size: 14px;
color: #000;
}
.ellipsis .overlay {
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
overflow: hidden;


/**
overflow: visible;
left: 0;
background: rgba(0,0,0,.5);
/**/
}
.ellipsis .overlay:before {
content: "";
display: block;
float: left;
width: 50%;
height: 100%;


/**
background: lightgreen;
/**/
}
.ellipsis .placeholder {
float: left;
width: 50%;
height: 40px;/* h*n */


/**
background: lightblue;
/**/
}
.ellipsis .more {
position: relative;
top: -20px;/* -h */
left: -50px;/* -w */
float: left;
color: #000;
width: 50px;/* width of the .more w */
height: 20px;/* h */
font-size: 14px;


/**
top: 0;
left: 0;
background: orange;
/**/
}

<div class='ellipsis'>
<div class='content'>
<div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
<div class='overlay'>
<div class='placeholder'></div>
<div class='more'>...more</div>
</div>
</div>
</div>

这里是纯css中的好例子。

.container{
width: 200px;
}
.block-with-text {
overflow: hidden;
position: relative;
line-height: 1.2em;
max-height: 3.6em;
text-align: justify;
margin-right: -1em;
padding-right: 1em;
}
.block-with-text+.block-with-text{
margin-top:10px;
}
.block-with-text:before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
}
.block-with-text:after {
content: '';
position: absolute;
right: 0;
width: 1em;
height: 1em;
margin-top: 0.2em;
background: white;
}

<div class="container">




<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
</div>


<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>




<div class="block-with-text">
Lorem Ipsum is simply
</div>


</div>

如果有人试图让线钳在flexbox工作，它有点棘手——尤其是当你在折磨测试非常长的单词时。这段代码片段中唯一真正的区别是包含截断文本的伸缩项中的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(代码依赖版本)

对于支持它的浏览器(大多数现代浏览器)，只需使用行夹，对于较老的浏览器则退回到一行。

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

浏览器支持

没有简单的方法。使用Clamp.js库。

$clamp(myHeader, {clamp: 3});

纯css方式用省略号修饰多行文本

.block-ellipsis {
display: block;
display: -webkit-box;
max-width: 100%;
height: 30px;
margin: 0 auto;
font-size: 14px;
line-height: 1;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

这里所有的答案都是错的，他们漏掉了重要的部分，高度

.container{
width:200px;
height:600px;
background:red
}
.title {
overflow: hidden;
line-height: 20px;
height: 40px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
<div class="container">
<div class="title">this is a long text you cant cut it in half</div>
</div>

迟回复，但一个html换行也可以，所以你可以做一个html + css唯一的解决方案。所以通常使用br元素是不好的做法，但如果你用br打断了注释，text-overflow省略号将从html文本的下一行开始。

我将这些css属性用于行省略号

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

这里-webkit-line-clamp: 3;是行数(3行)，之后…所示。

Sass helper mixin:

对于那些正在使用像Sass这样的预处理器的人来说，你可以有一个带有名为lines的可选参数的mixin，该参数默认为1，这使得在元素上应用文本截断非常方便，并在需要时更改行数:

@mixin text-ellipsis($lines: 1) {
text-overflow: ellipsis;
overflow: hidden;
@if ($lines > 1) {
display: -webkit-box;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
} @else {
white-space: nowrap;
}
}

用法:

.some-title {
@include text-ellipsis($lines: 2);
}