下面的链接为这个问题提供了一个纯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>

小提琴

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

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

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

还有一些性能测试。

这里有很多答案，但我需要的是:

CSS只 面向未来(与时间更加兼容) 不会把单词分开(只在空格上分开)

需要注意的是，它不为不支持-webkit-线夹规则的浏览器(目前是IE, Edge, Firefox)提供省略号，但它确实使用渐变淡出文本。

.clampMe { position: relative; height: 2.4em; overflow: hidden; } .clampMe:after { content: ""; text-align: right; position: absolute; bottom: 0; right: 0; width: 50%; height: 1.2em; /* Just use multiples of the line-height */ background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%); } /* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */ @supports (-webkit-line-clamp: 2) { .clampMe { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .clampMe:after { display: none; } } <p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish 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>

你可以在这个CodePen中看到它的运行，你也可以在这里看到Javascript版本(没有jQuery)。

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; 

点击这里查看更多信息

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

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

这是最接近的解决方案，我可以得到只用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专家已经知道如何使它完美。：）