CSS文本溢出-如果文本延伸到第（n）行，则应用省略号

我使用以下代码来防止文本溢出到新行：

.info-box{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; 
  height: 3em;
  width: 300px;
  font-size: 1em;
  line-height: 1em;
}

正如预期的那样，这是可行的，但是这个框中有三行的空间。如果文本超出第三行，如何命令浏览器应用省略号？或者文本溢出只在一个以上有效

---

如果我需要JS，我就不麻烦了。

你可以用CSS像这样伪造它

在

div的开头添加一个
…

<div class="info-box"><span>...</span>Lorem ipsum dolar etc.</div>

工作示例：

供参考。。。在左上角应该是省略号的地方会有一个小间隙（因为我们使用的是
position:relative；
）

仅供参考2…如果您调整
顶部
和
左侧
，我知道这是一个老问题，但我找到了这个修复方法，它对我很好


请注意，
文本溢出
在Firefox中不起作用。@rfusak-它将出现在Firefox 7中，现在应该很快发布（请参阅了解更多信息）谢谢，这是一种非常好的技术，谢谢，我正在尝试，当你有机会不完全填充文本行时，这不是一个解决方案。
.info-box{
    overflow:hidden;  
    height: 3em;
    width: 300px;
    font-size: 1em;
    line-height: 1em;
    padding-right:20px;
}

.info-box span{
    position:relative;
    top:31px;
    left:297px;
    display:inline-block;
}

    @import "compass/css3";

/* Martin Wolf CodePen Standard */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

* {
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
}

body {
  padding: 3em 2em;
  font-family: 'Open Sans', Arial, sans-serif;
  color: #cf6824;
  background: #f7f5eb;
}

/* END Martin Wolf CodePen Standard */


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