怎么才能让DIV里面的文字只显示一行半，第二行的一半之后进行省略

Question

如题，假如div里面的文字完全显示的话有三行或者四行，怎么样才能让div只显示一行半的文字，然后后面变成省略号

Answer 1

function noMoreWord(){

var abtitle=$(".about-text");
console.log(abtitle)
for(var i=0;i<abtitle.length;i++){
    var nodom=$(abtitle[i])
    var alength=nodom.text().length;
    var awidth=nodom.width();
    var afont=nodom.css("font-size");
    afont=afont.substr(0,2);
    var num=Math.floor(awidth/afont);
    console.log(num);
    
    if(alength>(num*1.5)){
        var ntex=nodom.text().substr(0,(Math.floor(num*1.5-1)));
        nodom.text(ntex+"...");
    }
}

}

Answer 2

第二行的一半之后进行省略？这是什么需求？
如果你要实现的是最多显示2行，超出省略可以用下面的方法

<div class="ellipsis" style="width:300px">
  怎么才能让DIV里面的文字只显示一行半，第二行的一半之后进行省略怎么才能让DIV里面的文字只显示一行半，第二行的一半之后进行省略怎么才能让DIV里面的文字只显示一行半，第二行的一半之后进行省略
</div>
<style>
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
  }
</style>

Answer 3

接楼上，如果不用JS的话，我只能捣鼓成这样了。。。

                <div class="ellipsis" style="width:300px">
                    怎么才能让DIV里面的文字只显示一行半，第二行的一半之后进行省略怎么才能让DIV里面的文字只显示一行半，第二行的一半之后进行省略怎么才能让DIV里面的文字只显示一行半，第二行的一半之后进行省略
                </div>
                <style>
                    .ellipsis {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        position: relative;
                    }

                    .ellipsis:after {
                        content: '...';
                        display: block;
                        width: 50%;
                        height: 50%;
                        right: 0;
                        bottom: 0;
                        position: absolute;
                    }
                </style>

Answer 4

如果div的宽度是一定的，可以求取内容的字符长度，直接字符进行截取，展示的内容后面加上省略号

Answer 5

1楼2楼的只适合谷歌浏览器，其他浏览不兼容啊，建议用js

Answer 6

还有一种方法
<div class="content">

</div>