第二行的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 ... 

Answer 1

一种text-overflow: ellipsis;工作的要求是单行版本white-space（pre,nowrap等）。这意味着文本将永远不会到达第二行。

Ergo。在纯CSS中不可能。

时，我一直在寻找同样的事情只是我现在的源：http://www.quirksmode.org/css/textoverflow.html（怪异模式FTW！）

编辑如果好的CSS神将实施http://www.w3.org/TR/css-overflow-3/#max-lines我们可以使用fragments纯CSS HAZ这个（新）和max-lines（新）。同样在http://css-tricks.com/line-clampin/

EDIT 2的WebKit /眨眼一些更多的信息有line-clamp：-webkit-line-clamp: 2将会把省略号在2号线。

Answer 2

这是一个非标准的CSS，这是不包括在当前版本的CSS（Firefox不支持它）。尝试使用JavaScript代替。

Answer 3

我以前使用过jQuery-condense-plugin，看起来它可以做你想做的。如果没有，则有different plugins可能适合您的需求。

编辑：使你成为demo - 注意，我联系上确实神奇演示了jquery.condense.js，所以充分肯定该插件:)笔者

Answer 4

多么可惜，你不能让它在两行工作！如果元素是显示块并且高度设置为2em或者其他东西，并且当文本溢出时它会显示省略号！

对于单衬你可以使用：

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

多行，也许你可以使用填充工具如jQuery autoellipsis这是在github http://pvdspek.github.com/jquery.autoellipsis/

Answer 5

我不是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等...

或者，你可以简单地截断它归结为一个特定的字符数是这样的：

// 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等euismod ...

希望有点帮助。

这里是jsFiddle。

Answer 6

我以前遇到这个问题，并没有纯CSS的解决方案

这就是为什么我有developped一个小型图书馆，以解决这个问题（等等）。该库提供对象来建模和执行字母级别的文本渲染。例如，您可以模拟文本溢出：具有任意限制的省略号（不需要一行）

有关屏幕截图，教程和下载链接的更多信息，请参见http://www.samuelrossille.com/home/jstext.html。

Answer 7

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

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

这是jsFiddle。

Answer 8

这应该在WebKit浏览器工作：

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

Answer 9

我找到了，但是你需要知道一个粗略的字符长度，将适合您的文本区域解决方法，然后加入...到先于空间。

我这样做的方法是：

1. 假设一个粗略的字符长度（在这种情况下200），并传递给 功能与文字一起
2. 分裂的空间让你有一个长串
3. 使用jQuery获得片中的第一“”空间你的性格 长度
4. 加入剩余的后...

代码：

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

这里是一个小提琴 - http://jsfiddle.net/GYsW6/1/

Answer 10

如果有人在这个问题用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浏览器中添加省略号。休息就是把它切断。

Answer 11

我发现Skeep的回答是不够的，需要一个overflow风格太：

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

Answer 12

上-webkit-线夹持器的纯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>

Answer 13

这里是很好的example在纯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>

Answer 14

如果有人试图让行钳在Flexbox的工作，这是一个稍微麻烦 - 尤其是当你有很长的话折磨测试。此代码段中唯一真正的差异是在包含截断文本的Flex项目中的min-width: 0;，以及word-wrap: break-word;。为了洞察，请致电https://css-tricks.com/flexbox-truncated-text/。免责声明：据我所知，这仍然是webkit。

.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版本）