Html 第二行的css省略号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5269713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css ellipsis on second line
提问by Reigel
CSS text-overflow: ellipsison second line, is this possible? I can't find it on the net.
CSStext-overflow: ellipsis在第二行，这可能吗？我在网上找不到。
example:
例子：
what I want is like this:
我想要的是这样的：
I hope someone could help me. I need
an ellipsis on the second line of...
but what's happening is this:
但发生的事情是这样的：
I hope someone could help me. I ...
采纳答案by Rudie
A requirement for text-overflow: ellipsis;to work is a one-line version of white-space(pre, nowrapetc). Which means the text will never reach the second line.
一种用于要求text-overflow: ellipsis;对工作是一个单行的版本white-space（pre，nowrap等）。这意味着文本永远不会到达第二行。
Ergo. Not possible in pure CSS.
因此。在纯 CSS 中不可能。
My source when I was looking for the exact same thing just now: http://www.quirksmode.org/css/textoverflow.html(Quirksmode ftw!)
我刚才在寻找完全相同的东西时的来源：http://www.quirksmode.org/css/textoverflow.html（Quirksmode ftw！）
EDITIf the good CSS gods will implement http://www.w3.org/TR/css-overflow-3/#max-lineswe can haz this in pure CSS using fragments(new) and max-lines(new). Also some more info on http://css-tricks.com/line-clampin/
编辑如果优秀的 CSS 神会实现http://www.w3.org/TR/css-overflow-3/#max-lines，我们可以使用fragments(new) 和max-lines(new)在纯 CSS 中实现这一点。还有一些关于http://css-tricks.com/line-clampin/ 的更多信息
EDIT 2WebKit/Blink has line-clamp: -webkit-line-clamp: 2will put ellipsis on 2nd line.
编辑 2WebKit/Blink has line-clamp:-webkit-line-clamp: 2将省略号放在第二行。
回答by Skeep
This should work in webkit browsers:
这应该适用于 webkit 浏览器：
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
回答by Giohji
As others have already answered, a pure CSS solution does not exists. There is a jQueryplugin that is very easy to use, it is called dotdotdot. It uses the container's width and height to calculate if it needs to truncate and add ellipsis.
正如其他人已经回答的那样，不存在纯 CSS 解决方案。有一个非常容易使用的jQuery插件，它叫做dotdotdot。它使用容器的宽度和高度来计算是否需要截断和添加省略号。
$("#multilinedElement").dotdotdot();
Here is a jsFiddle.
这是一个jsFiddle。
回答by Simon H
I found that Skeep's answer was not enough and needed an overflowstyle too:
我发现 Skeep 的回答还不够，还需要一种overflow风格：
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
回答by Nicholas
Just use line-clamp for the browsers that support it(most modern browsers) and fall back to 1 line for older.
只需对支持它的浏览器（大多数现代浏览器）使用 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;
}
}
回答by pkyeck
if someone is using SASS/SCSS and stumbles upon this question - maybe this mixin could be of help:
如果有人正在使用 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');
}
this only adds the ellipsis in webkit browsers. rest just cuts it off.
这只会在 webkit 浏览器中添加省略号。休息只是切断它。
回答by superlogical
What a shame that you can't get it to work over two lines! Would be awesome if the element was display block and had a height set to 2em or something, and when the text overflowed it would show an ellipsis!
你不能让它在两行上工作真是太遗憾了！如果元素是显示块并且高度设置为 2em 或其他东西，那将会很棒，并且当文本溢出时它会显示一个省略号！
For a single liner you can use:
对于单个衬垫，您可以使用：
.show-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
For multiple lines maybe you could use a Polyfill such as jQuery autoellipsis which is on github http://pvdspek.github.com/jquery.autoellipsis/
对于多行，也许您可以使用 Polyfill，例如 github http://pvdspek.github.com/jquery.autoellipsis/上的 jQuery autoellipsis
回答by Ross Howard-Jones
I'm not a JS pro, but I figured out a couple ways you could do this.
我不是 JS 专业人士，但我想出了几种方法可以做到这一点。
The HTML:
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>
Then with jQuery you truncate it down to a specific character count but leave the last word like this:
然后使用 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);
}
The result looks like this:
结果如下所示：
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
elementum consequat tortor et…
Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英。Morbi
elementum consequat tortor等...
Or, you can simply truncate it down to a specific character count like this:
或者，您可以简单地将其截断为特定的字符数，如下所示：
// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
var truncated = myTag.trim().substring(0, 100) + "…";
$('#truncate').text(truncated);
}
The result looks like this:
结果如下所示：
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
elementum consequat tortor et euismod…
Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英。Morbi
elementum consequat tortor等euismod ...
Hope that helps a bit.
希望那些对你有帮助。
Here is the jsFiddle.
这是jsFiddle。
回答by Mirodil
here is good examplein pure css.
这是纯 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>回答by andyb
I have used the jQuery-condense-pluginbefore, which looks like it can do what you want. If not, there are different pluginsthat might suit your needs.
我之前用过jQuery-condense-plugin，看起来它可以做你想做的。如果没有，有不同的插件可能适合您的需求。
Edit: Made you a demo- note that I linked the jquery.condense.json the demo which does the magic, so full credit to the author of that plugin :)
编辑：为您制作了一个演示- 请注意，我在演示中链接了jquery.condense.js，它具有神奇的作用，因此完全归功于该插件的作者:)
