有点晚了，但我想到了，我认为，是一个独特的解决方案。而不是试图通过css技巧或js插入自己的省略号，我想我会试着使用单行限制。所以我复制了每个“行”的文本，只是使用负文本缩进，以确保一行从最后一行停止的地方开始。小提琴

CSS:

#wrapper{
    font-size: 20pt;
    line-height: 22pt;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.text-block-line{
    height: 22pt;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}
.text-block-line:last-child{
    text-overflow: ellipsis;
}

/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
    text-indent: -100%;
}
.line3{
    text-indent: -200%;
}
.line4{
    text-indent: -300%;
}

HTML:

<p id="wrapper" class="redraw">
    <span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
</p>

更多的细节在小提琴。有一个问题与浏览器回流，我使用JS重绘，这样做检查它，但这是基本概念。任何想法/建议都非常感谢。

我发现这个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

我一直在尝试，直到我成功地实现了接近这个的东西。但有几点需要注意:

It's not pure CSS; you have to add a few HTML elements. There's however no JavaScript required. The ellipsis is right-aligned on the last line. This means that if your text isn't right-aligned or justified, there may be a noticable gap between the last visible word and the ellipsis (depending on the length of the first hidden word). The space for the ellipsis is always reserved. This means that if the text fits in the box almost precisely, it may be unnecessarily truncated (the last word is hidden, although it technically wouldn't have to). Your text needs to have a fixed background color, since we're using colored rectangles to hide the ellipsis in cases where it's not needed.

我还应该注意，文本将在单词边界处断开，而不是字符边界处断开。这是有意为之(因为我认为这对较长的文本更好)，但因为它不同于text-overflow: ellipsis，所以我认为我应该提到它。

如果你可以接受这些警告，HTML看起来是这样的:

<div class="ellipsify">
    <div class="pre-dots"></div>
    <div class="dots">&hellip;</div>
    <!-- your text here -->
    <span class="hidedots1"></span>
    <div class="hidedots2"></div>
</div>

这是相应的CSS，以一个150像素宽的盒子为例，在白色背景上有三行文本。它假设你有一个CSS重置或类似的设置，在必要的地方将边距和填充设置为零。

/* the wrapper */
.ellipsify {
    font-size:12px;
    line-height:18px;
    height: 54px;       /* 3x line height */
    width: 150px;
    overflow: hidden;
    position: relative; /* so we're a positioning parent for the dot hiders */
    background: white;
}

/* Used to push down .dots. Can't use absolute positioning, since that
   would stop the floating. Can't use relative positioning, since that
   would cause floating in the wrong (namely: original) place. Can't 
   change height of #dots, since it would have the full width, and
   thus cause early wrapping on all lines. */
.pre-dots {
    float: right;
    height: 36px;  /* 2x line height (one less than visible lines) */
}

.dots {
    float: right; /* to make the text wrap around the dots */
    clear: right; /* to push us below (not next to) .pre-dots */
}

/* hides the dots if the text has *exactly* 3 lines */
.hidedots1 {
    background: white;
    width: 150px;
    height: 18px;       /* line height */
    position: absolute; /* otherwise, because of the width, it'll be wrapped */
}

/* hides the dots if the text has *less than* 3 lines */
.hidedots2 {
    background: white; 
    width: 150px;
    height: 54px;       /* 3x line height, to ensure hiding even if empty */
    position: absolute; /* ensures we're above the dots */
}

结果如下所示:

为了阐明它是如何工作的，下面是相同的图像，除了.hidedots1用红色突出显示，而.hidedots2用青色突出显示。当没有看不见的文本时，这些矩形隐藏了省略号:

在IE9, IE8(模拟)，Chrome, Firefox, Safari和Opera中测试。IE7不支持。

为了完整起见，我想补充一下这个问题。

Opera有一个叫做-o- elliposis -lastline的非标准支持。 dotdotdot是一个很棒的jQuery插件。

在查看了W3规范的文本溢出后，我认为仅使用CSS是不可能的。省略号是一个新属性，所以它可能还没有得到太多的使用或反馈。

然而，这家伙似乎问了一个类似(或相同)的问题，有人能够提出一个很好的jQuery解决方案。您可以在这里演示解决方案:http://jsfiddle.net/MPkSF/

如果javascript不是一个选择，我认为你可能不走运…

这里有一篇最近的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;
    }
}