最新消息:

第102款插件:jQuery.dotdotdot单行及多行文本的省略号使用方法

高级页面 杨红伟 4485浏览

一:题记

笔者最近在做网页的自适应项目,经常遇到文本的溢出,也会处理。单行就是用text-overflow的方法,再用width;多行文本设置height,再用overflow的方法进行隐藏。虽然能进行处理,但总感觉有些不对!为什么这样说呢,如果这样做的话,就不叫自适应了,因为文本后边本身有很多的内容,只是因为不同的分辨率,有些能隐藏有些不能隐藏罢了,而且多行文本最后不显示的情况下,无法用省略号进行处理。
思之欲久,百度了半天,CSS也是用我的方法。找到这款插件,我兴奋了半天,于是发现好多问题,尤其是中英文处理方式,于是我花了一下午,一晚上的时间,将之翻译过来。也希望广大前端程序员们用之!
闲言少续,书归正传!

二:插件简介

(1)jquery实现单行文本或多行文本,末尾省略号的处理方式,太好了!

(2)可以追加“更多”,查看更多内容,太棒了!

(3)自适应内容的省略号处理方式,太经典的!

三:插件作者、下载

插件作者:暂无

原插件官网:http://dotdotdot.frebsite.nl

原插件Git地址: https://github.com/FrDH/jQuery.dotdotdot

译文作者:杨红伟

译后插件官网: http://www.ijquery.cn/demo/jQuery.dotdotdot/dotdotdot.frebsite.nl/index.cn.html

译后下载地址: http://git.oschina.net/hongweizhiyuan/jQuery.dotdotdot

四:安装

bower安装:bower install jQuery.dotdotdot

Git安装:git clone https://github.com/FrDH/jQuery.dotdotdot

OSC Git安装:git clone http://git.oschina.net/hongweizhiyuan/jQuery.dotdotdot

五:演示

原插件官网:http://dotdotdot.frebsite.nl

原文演示地址: http://www.ijquery.cn/demo/jQuery.dotdotdot/index.html

译文演示地址: http://www.ijquery.cn/demo/jQuery.dotdotdot/index_cn.html

六:最简代码

演示地址: http://www.ijquery.cn/demo/jQuery.dotdotdot/simple.html

1、HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery.dotdotdot最简使用教程</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" language="javascript" src="src/jquery.dotdotdot.js"></script>
        <link href="//cdn.bootcss.com/normalize/3.0.3/normalize.css" rel="stylesheet">
        <script type="text/javascript" language="javascript">
            $(function() {
                $('#dot1').dotdotdot({
                    wrap: 'letter'  //注:中文必须改为letter
                });
            })
        </script>
        <style type="text/css">
            body{background: #EEEEEE;}
            div.box {
                width: 275px;
                margin:  auto;
                margin-top:20px;
                border: 1px solid #ccc;
                height: 160px;
                padding: 15px 20px 10px 20px;
            }
        </style>
    </head>
    <body>
        <div class="box" id="dot1">
            Lorem Ipsum只是一个打印和排版的行业的简单制作样本。1500年以前Lorem Ipsum曾经是这个行业的标准制作样本,直到一个未知的印刷者制作了一个活版盘的类型,并且把它制作成一个样本书。它不仅存活了五个世纪,而且引领电子行业印刷的发展,形式上基本上保持不变。</div>
    </body>
</html>

2、CSS代码

div.box {
    width: 275px;
    margin:  auto;
    margin-top:20px;
    border: 1px solid #ccc;
    height: 160px;
    padding: 15px 20px 10px 20px;
}

3、jQuery代码,中文必须为letter,作者在这方面已经考虑了中文的双字节,不得不佩服作者的认真程度!!!

$(function() {
    $('#dot1').dotdotdot({
        wrap: 'letter'  //注:中文必须改为letter
    });
})