jQuery常用外掛都有哪些？

在這一節中，我們來給小夥伴們介紹幾個在實際工作中非常好用的外掛。

1. 文字溢位：dotdotdot.js

學過 HTML5+CSS3 的小夥伴都知道，我們可以使用以下功能程式碼來實現文字溢位時顯示省略號的效果。

overflow:hidden; 
white-space:nowrap;
text-overflow:ellipsis;

但是這個功能程式碼只能實現“單行文字”的省略號效果，並不能用來實現“多行文字”的省略號效果。如果想要實現“多行文字”的省略號效果，我們可以使用 dotdotdot.js 這個 jQuery 外掛。

舉例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div 
        {
            width: 200px;
            height: 100px;
            padding: 10px;
            font-family: "微軟雅黑";
            line-height: 20px;
            text-indent: 2em;
            border: 1px solid silver;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.dotdotdot.min.js"></script>
    <script>
        $(function(){
            $("div").dotdotdot();
        })
    </script>
</head>
<body>
    <div>C語言中文網致力於分享精品教學，幫助對程式設計感興趣的讀者。我們一直都在堅持的是：認認真真、一絲不苟、以工匠的精神來打磨每一套教學，讓讀者感受到作者的用心，以及默默投入的時間，由衷地心動和點讚。這樣的教學是一件作品，而不是呆板的文字！</div>
</body>
</html>

預覽效果如圖 1 所示。

圖 1：省略號效果