html 如何判断文本溢出,HTML文本溢出效果

【前期准备】① 导入jQuery文件；

JS-Lamda-Overflow

p{padding: 0;margin: 0;}

.outer{width: 300px;height: 80px;line-height: 20px;overflow: hidden;}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam corporis,

deleniti dolor ducimus error eveniet fuga iusto laborum nisi odio perferendis

reprehenderit sint sit temporibus voluptatibus. Cupiditate exercitationem quis voluptate.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto consequatur

dolores error facilis illo odio quis repellendus sed temporibus. Adipisci aliquam ea eaque

esse iste nostrum numquam repellendus rerum!

$(".outer").each(function(i){

var outerH = $(this).height();

var $p = $("p", $(this)).eq(0);

while ($p.outerHeight() > outerH) {

$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));

};

});

效果显示如下：