Home > Developer > Web Develop
In order to achieve the end of the paragraph beyond the text to replace the ellipsis, write their own plug-ins, and made a simple optimization.
Here are the script presentation pages and comments, before introducing the plugin parameters
1.lineNum: Number. Limit the number of lines in a paragraph
2.english: Boolean. English mode character is small, need to enlarge the screen space, the actual source code is modified by this parameter and cover op_num;
3.op_num: Numbers. Optimization factor, generally do not need to set. Default 1.3 Chinese mode, 1.3*2.5 English mode
Demo Page HTML code<!DOCTYPE HTML><HTMLLang= "cn"><Head> <MetaCharSet= "Utf-8"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1"> <title>Test Jquery.ellipsis.js</title> <Linkrel= "stylesheet"href= "Css/main.css"></Head><Scriptsrc= "Js/jquery-2.1.0.js"></Script><Scriptsrc= "Js/jquery.ellipsis.js"></Script><Body><Divclass= "TextBox"> <P>[1] in the 2004 TV series, "Days related to youth" began to emerge in the film circle. 2005 filmed the costume drama "Jinyiwei". 2007 starring producers Director's youth drama "struggle"; [2] in the same year, starring in the first film "Go See". 2008 starring Teng Huatao directed the TV series "dwelling", playing the young urban youth Beckham. [1] [3] In 2009, in the film "Ocean Paradise" played the autistic patient Boyuen, the same year in the anti-Japanese theme of the TV series "Snow Leopard" [4]. 2011, starring the TV series "Naked Marriage era" in the major TV broadcast; [5] 2011-2012 for 2 consecutive years to obtain the Beijing University Film Festival [6-7] The most popular male actor award. 2012, with the film "lovelorn 33 Days" won the 31st annual popular film Hundred Best Actor Award; [8] the same year set up its own operating Beijing June bamboo Culture and Culture Co., Ltd., and director of the first film and television works "Little Dad". In February 2013, the film "The West Tour and the spell of Enchantment" was released nationwide. </P></Div><Divclass= "TextBox2"> <P>[1] in the 2004 TV series, "Days related to youth" began to emerge in the film circle. 2005 filmed the costume drama "Jinyiwei". 2007 starring producers Director's youth drama "struggle"; [2] in the same year, starring in the first film "Go See". 2008 starring Teng Huatao directed the TV series "dwelling", playing the young urban youth Beckham. [1] [3] In 2009, in the film "Ocean Paradise" played the autistic patient Boyuen, the same year in the anti-Japanese theme of the TV series "Snow Leopard" [4]. 2011, starring the TV series "Naked Marriage era" in the major TV broadcast; [5] 2011-2012 for 2 consecutive years to obtain the Beijing University Film Festival [6-7] The most popular male actor award. 2012, with the film "lovelorn 33 Days" won the 31st annual popular film Hundred Best Actor Award; [8] the same year set up its own operating Beijing June bamboo Culture and Culture Co., Ltd., and director of the first film and television works "Little Dad". In February 2013, the film "The West Tour and the spell of Enchantment" was released nationwide. </P></Div><Scripttype= "Text/javascript">$('. TextBox'). Ellipsis ({中文版:false, LineNum:4});$('. TextBox2'). Ellipsis ({中文版:false, LineNum:5});</Script></Body></HTML>Css
{ font: 12px/1.5 "Microsoft Yahei", Simsun,tahoma, Helvetica, Arial, Sans-serif;} . TextBox P { text-indent: 20px;} { width: 200px;}//paragraph ellipsis plug-in;(function($) {$.fn.ellipsis=function(options) {//plug-in ParametersOptions =$.extend ({//English Mode中文版:false, //optimization Factorop_num:1.3, //number of target rowsLinenum:3,}, Options); $( This). each (function(index, Element) {//optimization Factor varOp_num =options. Op_num; //Wrap var$wrap = $ ( This); //Target P var$p = $ (' p ', $wrap); //Number of rows varLineNum =Options.linenum; //originally the whole article varOriginall =$p. Text (); //Font Size varPfontsize = parseint ($p. css (' font-size '))); //Row Height varPlineheight = parseint ($p. css (' line-height '))); //Past width varOldWidth =$p. Width (); //width now varNowwidth =OldWidth; //Set wrap height based on number of rows varWrapheight = LineNum *Plineheight; $wrap. Height (wrapheight); //English mode, more characters, coefficient *2.5Op_num = Options.english? 1.3*2.5:1.3; //first time loading a rough filter$p. Text (Originall.slice (0,linenum * nowwidth/pfontsize * op_num));//Main function functionrender () {Nowwidth=$p. Width (); //when the page is zoomed in, a rough filter if(Nowwidth >oldwidth) {$p. Text (Originall.slice (0,linenum * nowwidth/pfontsize * op_num));} oldwidth=Nowwidth; //Core Screening while($p. Outerheight () >wrapheight) {$p. Text ($p. Text (). replace (/\s? (\w+|\w{1,3}) (\. {6})? $/, "......")); }; } render (); //window stretching;$ (window). Resize (function(){ //combine page rendering operations with AsyncSetTimeout (render,0); }) }); };}) (jQuery);
Jquery.ellipsis.js paragraph exceeds ellipsis plugin
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
