CSS文本溢出 - 如果文本延伸(n)行,则应用省略号

Question

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

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

正如预期的那样,这可以工作,但在这个框中有三行的空间.如果文本超出第三行,我如何命令浏览器应用省略号？或者文本溢出仅适用于一个？

如果我需要JS,我probs不会打扰.

Answer 1

你可以像这样伪造它.

<span>...</span>在开头添加一个div.

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

在你的CSS中

1. 摆脱nowrap和text-overflow

2. 添加一些 padding-right

3. span将右下方的位置向下.

CSS

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

工作示例: http ://jsfiddle.net/jasongennaro/UeCsk/

fyi ...左上角会有一个小间隙,省略号应该是(因为我们正在使用position:relative;.

fyi 2 ...这应该适用于你想要的许多行(你在问题中提到了三个),只要你调整top和left.