多行文本溢出显示省略号(…)全攻略

梦里梦外; 2022-08-06 14:07 74阅读 0赞

原文：[http://www.css88.com/archives/5206][http_www.css88.com_archives_5206]

这里介绍一下2个js库 Clamp.js和jQuery.dotdotdot，它们非常不错哦。

Clamp.js地址：[https://github.com/josephschmitt/Clamp.js][https_github.com_josephschmitt_Clamp.js]  2.475 kb(压缩库)

jQuery.dotdotdot地址：[https://github.com/BeSite/jQuery.dotdotdot][https_github.com_BeSite_jQuery.dotdotdot]  6.15kb(压缩库)

A jQuery plugin for advanced cross-browser ellipsis on multiple line content.  
Demo's and documentation: [http://dotdotdot.frebsite.nl][http_dotdotdot.frebsite.nl]

[![687474703a2f2f646f74646f74646f742e66726562736974652e6e6c2f696d672f707265766965772e706e67][]][687474703a2f2f646f74646f74646f742e66726562736974652e6e6c2f696d672f707265766965772e706e67]

### How to use the plugin ###

Include all nessesary .js-files inside the head-tag of the page.

Create a DOM element and put some text and other HTML markup in this "wrapper".

<div id="wrapper">
        <p>Lorem Ipsum is simply dummy text.</p>
    </div>

Fire the plugin onDocumentReady using the wrapper-selector.

$(document).ready(function() {
        $("#wrapper").dotdotdot({
            // configuration goes here
        });
    });

[http_www.css88.com_archives_5206]: http://www.css88.com/archives/5206
[https_github.com_josephschmitt_Clamp.js]: https://github.com/josephschmitt/Clamp.js
[https_github.com_BeSite_jQuery.dotdotdot]: https://github.com/BeSite/jQuery.dotdotdot
[http_dotdotdot.frebsite.nl]: http://dotdotdot.frebsite.nl/
[687474703a2f2f646f74646f74646f742e66726562736974652e6e6c2f696d672f707265766965772e706e67]: /images/20220806/20c899acca8948d8a4f6780042422d43.png