工作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(新)和max-lines(新)在纯CSS中隐藏它。还有一些关于http://css-tricks.com/line-clampin/的信息
编辑2 WebKit / Blink有line-clamp:-webkit-line-clamp: 2将省略号放在第2行。
这应该适用于webkit浏览器:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
正如其他人已经回答的那样,纯CSS解决方案不存在。
有一个非常容易使用的jQuery插件,它被称为dotdotdot。
它使用容器的宽度和高度来计算是否需要截断并添加省略号。
$("#multilinedElement").dotdotdot();
这是一个jsFiddle。
我发现Skeep的答案还不够,还需要一个overflow风格:
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
太遗憾了,你无法让它在两条线上工作!如果元素是显示块并且高度设置为2em或者其他东西会很棒,当文本溢出时它会显示省略号!
对于单个衬垫,您可以使用:
.show-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
对于多行,也许您可以使用Polyfill,例如jith autoellipsis,它位于github http://pvdspek.github.com/jquery.autoellipsis/
如果有人使用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浏览器中添加省略号。休息只是切断它。
我不是JS专业人士,但我想出了几个可以做到这一点的方法。
HTML:
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.
然后使用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坐下来,精致的adipistur elit。 Morbi
elementum consequat 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坐下来,精致的adipistur elit。 Morbi
elementum consequat tortor et euismod ...
希望有点帮助。
这是jsFiddle。
我之前使用过jQuery-condense-plugin,看起来它可以做你想要的。如果没有,可以使用不同的插件来满足您的需求。
编辑:给你一个演示 - 请注意我在演示中链接了jquery.condense.js,它完成了魔术,所以完全归功于该插件的作者:)
这里是纯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;
}
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
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Lorem Ipsum is simply
它是一个非标准的CSS,在当前版本的CSS中没有涉及(Firefox不支持它)。尝试使用JavaScript代替。
只需为支持它的浏览器(大多数现代浏览器)使用线夹,然后再使用旧版的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;
}
}
我之前遇到过这个问题,并没有纯粹的CSS解决方案
这就是为什么我开发了一个小型库来处理这个问题(等等)。该库提供了对模型化和执行字母级文本呈现的对象。例如,您可以模拟文本溢出:具有任意限制的省略号(不必一行)
有关截图,教程和下载链接,请访问http://www.samuelrossille.com/home/jstext.html了解更多信息。
如果有人试图让线夹在flexbox中工作,那就有点麻烦了 - 特别是一旦你用很长的单词进行酷刑测试。此代码段中唯一真正的区别是包含截断文本的弹性项目中的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! */
}
asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
基于-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;
/**/
}
没有真正简单的方法来做到这一点。使用Clamp.js库。
$clamp(myHeader, {clamp: 3});
我找到了一个解决方案,但是你需要知道一个粗略的字符长度,它将适合你的文本区域,然后加入...到前面的空格。
我这样做的方式是:
假设一个粗略的字符长度(在这种情况下为200)并传递给a
与您的文字一起发挥作用
拆分空格,这样你就有了一个长串
使用jQuery来切换角色后的第一个“”空格
长度
加入剩下的......
代码:
truncate = function(description){
return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";
}
这是一个小提琴 - http://jsfiddle.net/GYsW6/1/