谢谢@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>

斯菲德勒

这是最接近的解决方案，我可以得到只用css。

HTML

<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>

CSS

div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

工作小提琴(调整窗口大小检查)

链接到我的博客获取解释

更新的小提琴

我希望现在一些css专家已经知道如何使它完美。：）

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;
}

浮动…更多

像这样

检测窗口大小或元素改变

像这样

好问题……我希望有一个答案，但这是最近你能得到的CSS。没有省略，但仍然很好用。

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height

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

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

还有一些性能测试。

我发现这个css (scss)解决方案的工作相当好。在webkit浏览器上，它显示省略号，而在其他浏览器上，它只是截断文本。这对我的预期用途很好。

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

创建者提供的示例:http://codepen.io/martinwolf/pen/qlFdp