css 文字第二行省略号,第二行的css省略号

工作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;

/**/

}

text text text text text text text text text text text text text text text text text text text text text

...more

没有真正简单的方法来做到这一点。使用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/