基于宽度截断文本的jQuery插件

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于宽度截断文本的jQuery插件相关的知识，希望对你有一定的参考价值。

This plugin will, by default, truncate a block of text down to one line at its current width (if the text block exceeds 1 line). You can also pass in a pixel value and it will truncate it to that width.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. 	<title>Truncate by Width Plugin</title>
  6. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8.  
  9. //////////////////////////// this part is the plugin, copy into a seperate document if you wish ////////////////////////////////
  10. (function($){
  11.  $.fn.extend({
  12.  
  13.  	widthTruncate: function(options) {
  14. 		var defaults = {
  15. 			width: 'auto',
  16. 			after: '...'
  17. 		};
  18.  
  19. 	  var options = $.extend(defaults, options);
  20.  
  21. 	  return this.each(function() {
  22. 	  if(options.width=='auto'){ truncateWidth=$(this).width()-8; }else{ truncateWidth = options.width}
  23. 			 if($(this).width()>truncateWidth){		 
  24. 			 var smaller_text = $(this).text();
  25. 			 $(this).html('<span id="truncateWrapper" style="display:inline;">'+options.after+'</div>');
  26. 			 		i=1;
  27. 			         while ($('#truncateWrapper').width() < truncateWidth) {
  28. 						$('#truncateWrapper').html(smaller_text.substr(0, i) + options.after);
  29. 						i++;
  30. 					}
  31. 					$(this).html($('#truncateWrapper').html());
  32. 			}
  33.  
  34. 	  });
  35.  
  36. 	}
  37.  
  38.  });
  39. })(jQuery);
  40. //////////////////////////// end plugin ////////////////////////////////
  41.  
  42. //////////////////////////// initiate the plugin ////////////////////////////////
  43. $(document).ready(function(){
  44. 	$('.autoTruncate').widthTruncate(); //by default, it will truncate to its initial width
  45. 	$('.truncateMe').widthTruncate({width:400}); // you can override by passing in your own width
  46. });
  47. </script>
  48.  
  49. <style type="text/css">
  50. 	/*some example styling... you can remove this*/
  51. 	body{ font:22px Arial, Helvetica, sans-serif;}
  52. 	#myParagraphs{width:700px; padding:28px; background-color:#99CCFF; }
  53. </style>
  54.  
  55. </head>
  56.  
  57. <body>
  58. <div id="myParagraphs">
  59.  
  60. <p class="autoTruncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit augue, malesuada vel sollicitudin a, molestie quis nibh. Suspendisse elementum facilisis neque, ut aliquet tellus sollicitudin ut. Fusce aliquam est ut lorem egestas a consectetur justo malesuada. Sed eleifend volutpat orci in mattis. Duis porttitor nisi in sem rutrum vehicula. In sodales lobortis rutrum. Integer eget metus enim, et accumsan justo. Sed vehicula molestie leo eu scelerisque.</p>
  61.  
  62. <p class="truncateMe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit augue, malesuada vel sollicitudin a, molestie quis nibh. Suspendisse elementum facilisis neque, ut aliquet tellus sollicitudin ut. Fusce aliquam est ut lorem egestas a consectetur justo malesuada. Sed eleifend volutpat orci in mattis. Duis porttitor nisi in sem rutrum vehicula. In sodales lobortis rutrum. Integer eget metus enim, et accumsan justo. Sed vehicula molestie leo eu scelerisque.</p>
  63.  
  64. </div>
  65.  
  66. </body>
  67. </html>

以上是关于基于宽度截断文本的jQuery插件的主要内容，如果未能解决你的问题，请参考以下文章

学习 | jQuery全屏滚动插件FullPage.js

检测 MFC 控件是不是没有足够的宽度来容纳文本（并且文本将被截断）

基于JQuery的进度条实现

基于Jquery的音乐播放器进度条插件

qt中基于宽度的字符串截断

jquery插件－fullpage.js