Home > Article > Web Front-end > How to overflow the title text and display the ellipsis '...'

How to overflow the title text and display the ellipsis '...'

一个新手Original: 2017-10-20 11:10:081709browse

标题、内容段末文本溢出“......”显示

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <!--meta标签注释：如果安装了GCF，则使用GCF来渲染页面，如果为安装GCF，则使用最高版本的IE内核进行渲染。-->
        <title>文本溢出截取...</title>
        <link rel="stylesheet" href="css/min.css" /> <!--公共css样式-->
        <link rel="stylesheet" href="css/index.css" />
    </head>

    <body>
        <h1>NO.1</h1>
        <div class="main_one">
            <p>
                生于蜂农之家的王佩甫先生，自小便追随父母辗转全国，天南海北，哪里花开，就往哪里赶。人在哪，家就在哪。追花虽辛苦，但对于养蜂人来说，苦尽甘来，收获琼浆，便能支撑起一家人的生活。 上世纪90年代，已深谙养蜂之道的王佩甫常骑着小车沿街兜售蜂蜜，后来在黔灵公园附近租了一个很小的门面落下了脚，渐渐有了回头客。1998年，王佩甫创办了贵州第一家公司化运营的蜂企业“百花蜂业”，并注册了品牌“黄果树蜂园”。
            </p>
        </div>
        </br>
        </br>
        <h1>NO.2</h1>
        <div class="main_ones">
            <p>
                痛客网设立严格的准入规则，专人上门验证审核，并通过大数据背景调查，力保服务商信息真实可靠。全新的企业服务产品线涵盖办公司、找人财法、找技术、找市场、创新方案等5大类别、200多个细类，全方位满足企业各环节需求。 企业用户想要获取企业服务，只需要登录痛客网，就可以像在天猫购买商品一样，在痛客网上买服务！ 目前，签约入驻痛客网的服务商已达到357家，其中不乏东软、用友、方正、财新、和君咨询、中细软、快法务、中青博联、埃摩森、泰和泰、法大大等品牌服务商。就在今天，同样都是为上班族解决痛点的痛客与ofo小黄车，要一起搞事情啦！
            </p>
        </div>
        </br>
        </br>
        <h1>NO.3</h1>
        <div class="main_onees">
            <p>
                痛客×ofo | 90天单车免费骑！解决企业痛点，“骑”实可以很轻松！
            </p>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-overflow.js" ></script>
    <script type="text/javascript">
        $(&#39;.main_one&#39;).ellipsis({
            english: false, //布尔。英文模式字符偏小，需扩大筛选空间，实际源码中是通过此参数修改并覆盖OP_NUM；
            lineNum: 2 //控制行数截取
        });
        $(&#39;.main_ones&#39;).ellipsis({
            english: false, //布尔。英文模式字符偏小，需扩大筛选空间，实际源码中是通过此参数修改并覆盖OP_NUM；
            lineNum: 2 //控制行数截取
        });
        $(&#39;.main_onees&#39;).ellipsis({
            english: false, //布尔。英文模式字符偏小，需扩大筛选空间，实际源码中是通过此参数修改并覆盖OP_NUM；
            lineNum: 1 //控制行数截取
        });
    </script>

</html>

css代码

body {
    font: 12px/1.5 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue";
}
.main_one p {
    width: 800px;
    text-indent: 20px;
    text-align: justify;
}
.main_ones {
    width: 500px;
    text-align: justify;
}
.main_onees {
    width: 605px;
    text-align: justify;
}

jquery-overflow.js代码

/**
 * jquery:2017-10-19
 * @version:1.0.1
 * @author:jason
 * @qq:847557896@qq.com */(function($) {
    $.fn.ellipsis = function(options) {        //插件参数
        options = $.extend({            //英文模式
            english: false,            //优化系数
            OP_NUM: 1.3, //数字。优化系数，一般不需要设置。默认1.3中文模式，1.3*2.5英文模式
            //目标行数
            lineNum: "",
        }, options);
        $(this).each(function(index, element) {            //优化系数
            var OP_NUM = options.OP_NUM;            //wrap
            var $wrap = $(this);            //目标p
            var $p = $(&#39;p&#39;, $wrap);            //行数
            var lineNum = options.lineNum;            //最初整篇文章
            var originAll = $p.text();            //字体大小
            var pFontSize = parseInt($p.css(&#39;font-size&#39;));            //行高
            var pLineHeight = parseInt($p.css(&#39;line-height&#39;));            // 过去宽度
            var oldWidth = $p.width();            // 现在宽度
            var nowWidth = oldWidth;            //根据行数设置wrap高度
            var wrapHeight = lineNum * pLineHeight;
            $wrap.height(wrapHeight);            // 英文模式，字符偏多，系数*2.5
            OP_NUM = options.english ? 1.3 * 2.5 : 1.3;            //首次加载先进行一次粗略筛选
            $p.text(originAll.slice(0, lineNum * nowWidth / pFontSize * OP_NUM));            //主功能
            function render() {
                nowWidth = $p.width();                //当页面放大时，粗略筛选
                if(nowWidth > oldWidth) {
                    $p.text(originAll.slice(0, lineNum * nowWidth / pFontSize * OP_NUM));
                }
                oldWidth = nowWidth;                //核心筛选
                while($p.outerHeight() > wrapHeight) {
                    $p.text($p.text().replace(/\s?(\w+|\W{1,3})(\.{3})?$/, "..."));
                };
            }
            render();
        });
    };
})(jQuery);

The above is the detailed content of How to overflow the title text and display the ellipsis '...'. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript implementation of simple shopping cart code exampleNext article：JavaScript implementation of simple shopping cart code example

See more

How to overflow the title text and display the ellipsis '...'

Related articles