HTML文本溢出效果
阿新 • • 發佈：2018-06-06
nis rendis javascrip out 20px 導入 com .com query
【前期準備】① 導入jQuery文件；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS-Lamda-Overflow</title>
<script type="text/javascript" src="js/jquery-1.7.min.js" ></script>
<style>
p{padding: 0;margin: 0;}
.outer{width: 300px;height: 80px;line-height: 20px;overflow: hidden;}
</style>
</head>
<body>
<div class="outer">
<p>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! </p>
</div>
<script>
$(".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)(\.\.\.)?$/, "..."));
};
});
</script>
</body>
</html>
效果顯示如下：
HTML文本溢出效果