在第二行的css省略号
CSS text-overflow: ellipsis在第二行，这是可能的吗？ 我无法在网上find它。
例：
我想要的是这样的：
I hope someone could help me. I need an ellipsis on the second line of...
但是发生了什么呢？
I hope someone could help me. I ...
对text-overflow: ellipsis;要求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我们可以在纯CSS使用;fragments （新）和max-lines （新）嗨。 还有一些关于http://css-tricks.com/line-clampin/的信息;
编辑2 WebKit /闪烁line-clamp ： -webkit-line-clamp: 2将省略号在第二行。
这应该在webkit浏览器中工作：
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
正如其他人已经回答，一个纯粹的CSS解决scheme不存在。 有一个很容易使用的jQuery插件，它被称为dotdotdot 。 它使用容器的宽度和高度来计算是否需要截断和添加省略号。
$("#multilinedElement").dotdotdot();
这是一个jsFiddle 。
我发现Skeep的答案还不够，还需要一个overflow风格：
overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical;
多么可惜的是，你不能把它工作两行！ 如果元素是显示块，高度设置为2em或什么的，当文本溢出时，会显示省略号！
对于单个class轮，您可以使用：
.show-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
对于多行，也许你可以使用一个Polyfill，如jQuery自动更正，这是在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); }
结果如下所示：
Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Morbi
元素的后代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
元素inheritance了酷刑和euismod …
希望有所帮助。
这是jsFiddle 。
我之前使用过jQuery-condense-plugin ，看起来可以做你想做的事情。 如果没有，有不同的插件可能适合您的需求。
编辑：让你演示 – 请注意，我链接的演示jquery.condense.js做的魔术，充分的信誉，该作者的插件:)
如果有人正在使用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浏览器中添加省略号。 rest一下就切断了。
这是一个非标准的CSS，在当前版本的CSS中没有涉及（Firefox不支持它）。 尝试使用JavaScript代替。
我以前遇到过这个问题，并没有纯CSS的解决scheme
这就是为什么我开发了一个小型图书馆来处理这个问题（等等）。 该库提供对象来build模和执行字母级别的文本呈现。 你可以例如模拟一个文本溢出：具有任意限制的省略号（不需要一行）
有关截图，教程和下载链接， 请访问http://www.samuelrossille.com/home/jstext.html以了解更多信息。;
这里是纯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上工作 ，那么这是一个稍微有点棘手的问题 – 尤其是一旦你用真正的长词进行折磨testing。 这个代码片段中唯一真正的区别是min-width: 0; 在包含截断文本的flex项目中，以及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>
一个基于-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>
我发现一个解决scheme，但是你需要知道一个粗略的字符长度，将适合您的文本区域，然后join…到前面的空间。
我这样做的方式是：
- 假设一个粗略的字符长度（在本例中为200）并传递给函数以及文本
- 拆分空格，以便您有一个长string
- 使用jQuery将切片放在字符长度之后的第一个“”空格处
- join剩下的…
代码：
truncate = function(description){ return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "..."; }
这里是一个小提琴 – http://jsfiddle.net/GYsW6/1/
