html - 如何从第 N 行文本开始应用“文本溢出”？

Question

w3schools.com/cssref/css3_pr_text-overflow.asp

如何创建一个 div 并让其中的文本正常换行，但只能换行至某一行（例如第二行），然后让text-overflow: ellipsis属性生效并隐藏该 div 中的剩余文本，如上关联？

Answer 1

就我个人而言，我使用的 Trunk8 插件正是你想要的。看看演示

例如，在您使用的插件的情况下：

$('#div').trunk8({
  lines: 2
});

插件链接

Answer 2

对于纯 CSS 解决方法，并且由于text-overflow不打算用于多行文本，如果您的文本容器具有固定的宽度和行高并控制文本应该开始隐藏的位置，则可以使用hack 。

用于模拟的 CSS text-overflow：

div{
    width:55%;
    padding:20px;
    line-height:20px;
    height:20px; /*for showing 2 lines of text*/
    overflow:hidden;
    position:relative;
}

div:after{
    content:"...";
    position:absolute;
    bottom:0;
    right:10px;
}

看这个演示：http: //jsfiddle.net/kfJAy/

Answer 3

您想要做的事情没有 css，但可能的解决方法是：

.ellipsis{
    line-height: 10px; //10px for easy multiplication
    height: 30px; //line-height * n
    text-overflow: ellipsis;
}