这里有一篇最近的css技巧文章讨论了这个问题。

上面文章中的一些解决方案(这里没有提到)是

1) -webkit-line-clamp和2)放置一个绝对定位的元素右下角淡出

这两种方法都假设有以下标记:

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

用css

.module {
  width: 250px;
  overflow: hidden;
}

1) -webkit-line-clamp

线夹(..最多3行)

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}

2)淡出

假设您将行高设置为1.2em。如果我们想曝光 三行文本，我们可以设置容器的高度 3.6em (1.2em × 3).隐藏溢出将隐藏其余部分。

淡出小提琴

p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

解决方案#3 -使用@supports的组合

我们可以使用@supports在webkit浏览器上应用webkit的线夹，并在其他浏览器上应用淡出。

@支持线钳与淡出回退小提琴

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS

.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

也有几个jquery插件处理这个问题，但许多不处理多行文本。以下工作:

http://pvdspek.github.com/jquery.autoellipsis/ http://dotdotdot.frebsite.nl/ http://keith-wood.name/more.html http://github.com/tbasse/jquery-truncate

还有一些性能测试。

谢谢@balpha和@Kevin，我把两种方法结合在一起。

这个方法不需要js。

你可以使用背景图像和不需要梯度隐藏点。

.ellipsis-placeholder的innerHTML不是必需的，我使用.ellipsis-placeholder来保持与.ellipsis-more相同的宽度和高度。 你可以使用display: inline-block代替。

.ellipsis { overflow: hidden; position: relative; } .ellipsis-more-top {/*push down .ellipsis-more*/ content: ""; float: left; width: 5px; } .ellipsis-text-container { float: right; width: 100%; margin-left: -5px; } .ellipsis-more-container { float: right; position: relative; left: 100%; width: 5px; margin-left: -5px; border-right: solid 5px transparent; white-space: nowrap; } .ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/ float: right; clear: right; color: transparent; } .ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/ float: right; width: 0; } .ellipsis-more {/*ellipsis things here*/ float: right; } .ellipsis-height {/*the total height*/ height: 3.6em; } .ellipsis-line-height {/*the line-height*/ line-height: 1.2; } .ellipsis-margin-top {/*one line height*/ margin-top: -1.2em; } .ellipsis-text { word-break: break-all; } <div class="ellipsis ellipsis-height ellipsis-line-height"> <div class="ellipsis-more-top ellipsis-height"></div> <div class="ellipsis-text-container"> <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div> <div class="ellipsis-placeholder"> <span>...</span><span>more</span> </div> <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span> </div> <div class="ellipsis-more-container ellipsis-margin-top"> <div class="ellipsis-more"> <span>...</span><span>more</span> </div> </div> </div>

斯菲德勒

我发现了一个javascript技巧，但你必须使用字符串的长度。假设你想要3行宽250px，你可以计算每行的长度。

//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines

//then ellipsify
function shorten(text, totalLength) {
    var ret = text;
    if (ret.length > totalLength) {
        ret = ret.substr(0, totalLength-3) + "...";
    }
    return ret;
}

Javascript解决方案将更好

获取文本的行数 如果窗口调整大小或元素更改，则切换is-省略号类

getRowRects

getclientrects()是这样工作的

同一行中的每个矩形都有相同的顶部值，所以找出顶部值不同的矩形，就像这样

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

浮动…更多

像这样

检测窗口大小或元素改变

像这样

下面的链接为这个问题提供了一个纯HTML / CSS的解决方案。

浏览器支持-如文中所述:

到目前为止，我们已经在Safari 5.0, IE 9(必须在标准模式下)， Opera 12和Firefox 15。 旧的浏览器仍然可以很好地工作，作为布局的核心 是在正常定位，边距和填充属性。如果你的 平台较老(例如Firefox 3.6, IE 8)，您可以使用该方法，但 重做渐变作为一个独立的PNG图像或DirectX过滤器。

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

css:

p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "\02026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

html:

<div class="ellipsis">
    <div>
        <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>  
    </div>
</div>

小提琴

(调整浏览器窗口大小进行测试)