第二行的CSS text-overflow: ellipsis
,这可能吗?我无法在网上找到它。第二行的css省略号
例如:
我想是这样的:
I hope someone could help me. I need
an ellipsis on the second line of...
,但发生的事情是这样的:
I hope someone could help me. I ...
第二行的CSS text-overflow: ellipsis
,这可能吗?我无法在网上找到它。第二行的css省略号
例如:
我想是这样的:
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;
工作的要求是单行版本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号线。
这是一个非标准的CSS,这是不包括在当前版本的CSS(Firefox不支持它)。尝试使用JavaScript代替。
我以前使用过jQuery-condense-plugin,看起来它可以做你想做的。如果没有,则有different plugins可能适合您的需求。
编辑:使你成为demo - 注意,我联系上确实神奇演示了jquery.condense.js,所以充分肯定该插件:)笔者
多么可惜,你不能让它在两行工作!如果元素是显示块并且高度设置为2em或者其他东西,并且当文本溢出时它会显示省略号!
对于单衬你可以使用:
.show-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行,也许你可以使用填充工具如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);
}
结果看起来是这样的:
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。
我以前遇到这个问题,并没有纯CSS的解决方案
这就是为什么我有developped一个小型图书馆,以解决这个问题(等等)。该库提供对象来建模和执行字母级别的文本渲染。例如,您可以模拟文本溢出:具有任意限制的省略号(不需要一行)
有关屏幕截图,教程和下载链接的更多信息,请参见http://www.samuelrossille.com/home/jstext.html。
正如其他人已经回答,纯粹的CSS解决方案不存在。 有一个很容易使用的jQuery插件,它被称为dotdotdot。 它使用容器的宽度和高度来计算是否需要截断和添加省略号。
$("#multilinedElement").dotdotdot();
这是jsFiddle。
这个插件还提供了很多其他工具,比如添加“阅读更多”链接,它也可以解析URI和HTML标记。好找! – 2013-07-31 08:39:34
我试用了jQuery dotdotdot 1.7.3为电子商务商店,将网格类别页面上的产品名称限制为两行。经过彻底测试,我们决定不使用这个插件,因为有时候,在移动刷新之后,分类页面布局会被破坏。因人而异。最后,我们使用了一个非常简单的vanilla JS解决方案:如果产品名称元素的clientHeight小于它的scrollHeight,则在预设边界处截断文本并追加“...”。有时由于预设的边界,少数产品名称可能有点太短,但它非常稳定。 – 10basetom 2015-06-02 10:40:16
还有一个AngularJS包装:https://github.com/beezee/angular-dotdotot – Dunc 2015-07-29 18:51:50
这应该在WebKit浏览器工作:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
我找到了,但是你需要知道一个粗略的字符长度,将适合您的文本区域解决方法,然后加入...到先于空间。
我这样做的方法是:
代码:
truncate = function(description){
return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";
}
这里是一个小提琴 - http://jsfiddle.net/GYsW6/1/
如果有人在这个问题用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浏览器中添加省略号。休息就是把它切断。
聪明的一个thx很多 – Nephelococcygia 2016-06-12 13:37:36
我发现Skeep的回答是不够的,需要一个overflow
风格太:
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
上-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>
这里是很好的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>
如果有人试图让行钳在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版本)
AFAIK省略号会出现,并在元件的宽度的端部切断的文本。它不会流到下一行。这里最好的解决方案是实现一些服务器端或客户端脚本,它可以自动将文本修剪为一定数量的字符,然后附加省略号。我的猜测是客户端脚本会更好,这将使您仍然可以在需要时使用所有原始文本。 – FarligOpptreden 2011-03-11 06:35:14
这里是一个类似的问题: http:// stackoverflow。com/questions/3922739/limit-text-length-to-n-lines-using-css/13924997 – Evgeny 2013-03-22 00:30:43
tl; dr:它只能在webkit中使用 – Evgeny 2013-03-22 00:32:01