首页>>Jquery文字>>jQuery多余内容显示省略号，控制长度显示省略号(2013-12-14)

jQuery多余内容显示省略号，控制长度显示省略号

 包括控制高度，长度，按照设置的内容显示省略号

jQuery多余内容显示省略号，控制长度显示省略号
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="wrapper" >  
  2.   
  3. <div class="example">  
  4. <p><strong>Text only:</strong></p>  
  5. <div class="l">  
  6. <p class="before">before:</p>  
  7. <div class="box before">freejs已经发了不少无刷新翻页的代码了，点击右侧“相关文章”可以找到，这边这个不同在于多了一个跳转页面。  
  8. 数据库与本站其他翻页的相同，本例和《jquery 无刷新翻页》均是非常实用的案例，而且本例更简单易懂  
  9.   <p>本例与<a href="http://www.freejs.net/article_fenye_22.html">《Jquery一页内翻页,类似于无刷新分页》</a>很相近而区别与其他本站发布的翻页代码</p>  
  10.   <p>翻页文件一次加载了全部的内容，因而不是很适合大型的网站，而适用于数据比较少的情况。</p>  
  11.   <p>本例未使用数据库。</p>  
  12. </div>  
  13. </div>  
  14. <div class="r">  
  15. <p class="after">after:</p>  
  16. <div class="box after" id="dot1">freejs已经发了不少无刷新翻页的代码了，点击右侧“相关文章”可以找到，这边这个不同在于多了一个跳转页面。  
  17. 数据库与本站其他翻页的相同，本例和《jquery 无刷新翻页》均是非常实用的案例，而且本例更简单易懂  
  18.   <p>本例与<a href="http://www.freejs.net/article_fenye_22.html">《Jquery一页内翻页,类似于无刷新分页》</a>很相近而区别与其他本站发布的翻页代码</p>  
  19.   <p>翻页文件一次加载了全部的内容，因而不是很适合大型的网站，而适用于数据比较少的情况。</p>  
  20.   <p>本例未使用数据库。</p>  
  21. </div>  
  22. </div>  
  23. </div>  
  24. <div class="example">  
  25. <p><strong>Text with markup:</strong></p>  
  26. <div class="l">  
  27. <p class="before">before:</p>  
  28. <div class="box before">  
  29. <p><em>Lorem Ipsum</em> is simply dummy text of the <strong>printing</strong> and <strong>typesetting industry</strong>.</p>  
  30. <p><em>Lorem Ipsum</em> has been the industry's standard dummy text ever since <strong>the 1500s</strong>, when an unknown printer took a <em>galley of type</em> and scrambled it to make a type specimen book.</p>  
  31. <p>It has survived not only <strong>five centuries</strong>, but also the leap into <strong>electronic typesetting</strong>.</p>  
  32. </div>  
  33. </div>  
  34. <div class="r">  
  35. <p class="after">after:</p>  
  36. <div class="box after" id="dot2">  
  37. <p><em>Lorem Ipsum</em> is simply dummy text of the <strong>printing</strong> and <strong>typesetting industry</strong>.</p>  
  38. <p><em>Lorem Ipsum</em> has been the industry's standard dummy text ever since <strong>the 1500s</strong>, when an unknown printer took a <em>galley of type</em> and scrambled it to make a type specimen book.</p>  
  39. <p>It has survived not only <strong>five centuries</strong>, but also the leap into <strong>electronic typesetting</strong>.</p>  
  40. </div>  
  41. </div>  
  42. </div>  
  43. <div class="example">  
  44. <p><strong>With an "after"-element:</strong></p>  
  45. <div class="l">  
  46. <p class="before">before:</p>  
  47. <div class="box before">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href="#" class="readmore">Read more »</a></div>  
  48. </div>  
  49. <div class="r">  
  50. <p class="after">after:</p>  
  51. <div class="box after" id="dot3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href="#" class="more">Read more »</a></div>  
  52. </div>  
  53. </div>  
  54. <div class="example resize">  
  55. <p><strong>Updating onWindowResize:</strong></p>  
  56. <div class="l">  
  57. <p class="before">before:</p>  
  58. <div class="box before">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>  
  59. </div>  
  60. <div class="r">  
  61. <p class="after">after:</p>  
  62. <div class="box after" id="dot4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>  
  63. </div>  
  64. </div>  
  65. <div class="example">  
  66. <p><strong>Truncate readable pathnames</strong></p>  
  67. <div class="l">  
  68. <p class="before">before:</p>  
  69. <div class="box before pathname">  
  70. <div class="pathname">www.freejs.net/index.html</div>  
  71. <div class="pathname">http://freejs.net/article_fenye_49.html</div>  
  72. </div>  
  73. </div>  
  74. <div class="r">  
  75. <p class="after">after:</p>  
  76. <div class="box after pathname" id="dot5">  
  77. <div class="pathname">www.freejs.net/index.html</div>  
  78. <div class="pathname">http://freejs.net/article_fenye_49.html</div>  
  79. </div>  
  80. </div>  
  81. </div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_173.html