码迷,mamicode.com
首页 > Web开发 > 详细

HTML文本溢出效果

时间:2018-06-06 01:01:31      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:function   ror   utf-8   javascrip   repr   title   while   hid   sse   

【前期准备】① 导入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文本溢出效果

标签:function   ror   utf-8   javascrip   repr   title   while   hid   sse   

原文地址:https://www.cnblogs.com/superdrew/p/9142593.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!