在第二行的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线( prenowrap等)的单行版本。 这意味着文本将永远不会到达第二行。

人机工程学。 在纯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…到前面的空间。

我这样做的方式是:

  1. 假设一个粗略的字符长度(在本例中为200)并传递给函数以及文本
  2. 拆分空格,以便您有一个长string
  3. 使用jQuery将切片放在字符长度之后的第一个“”空格处
  4. join剩下的…

代码:

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

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