根据文本长度自动在表格中显示更多/更少的文本

我有一个有两列的表,第二个有时包含大文本,所以我只想显示前100个字符,并显示更多链接以显示剩余的文本。 你可以在这里看到我正在使用的表http://jsfiddle.net/j11mj21x/ 。

为此,我使用此链接中提供的代码( http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/ ),我将其放在show_less_more.js文件中:

(function($) { $.fn.shorten = function (settings) { var config = { showChars: 100, ellipsesText: "...", moreText: "more", lessText: "less" }; if (settings) { $.extend(config, settings); } $(document).off("click", '.morelink'); $(document).on({click: function () { var $this = $(this); if ($this.hasClass('less')) { $this.removeClass('less'); $this.html(config.moreText); } else { $this.addClass('less'); $this.html(config.lessText); } $this.parent().prev().toggle(); $this.prev().toggle(); return false; } }, '.morelink'); return this.each(function () { var $this = $(this); if($this.hasClass("shortened")) return; $this.addClass("shortened"); var content = $this.html(); if (content.length > config.showChars) { var c = content.substr(0, config.showChars); var h = content.substr(config.showChars, content.length - config.showChars); var html = c + '' + config.ellipsesText + ' ' + h + ' ' + config.moreText + ''; $this.html(html); $(".morecontent span").hide(); } }); }; })(jQuery); $(document).ready(function(){$(".descriptionText").shorten();}); 

我这样使用它:

  " 

对于每一行,HTML都是这样的:

    course1   
Description of the course

我还为越来越少的链接添加了CSS:

  a { color: #0254EB } a:visited { color: #0254EB } a.morelink { text-decoration:none; outline: none; } .morecontent span { display: none; } 

当我在sfiddle中执行此操作时,它的工作非常好,因为您可以在这里看到http://jsfiddle.net/j11mj21x/2/但是,在使用python渲染我的表时,我什么也得不到。 我认为问题是我没有成功将我的JS页面加载到html页面,因为当我点击它时它什么都没有。 这是我的html页面中呈现的内容:

  ....     .... 

任何人都可以告诉我这可能是什么问题,因为我在与python中的文件生成器相同的文件夹中有“show_less_more.js”?

先感谢您 !

这是一个简单的例子,更多地依赖CSS。

 $(function() { $('a').click(function() { $('div').removeClass('ellipsis'); }); }); 
 div { border: solid 1px orange; width: 200px; overflow: hidden; } .ellipsis { white-space: nowrap; text-overflow: ellipsis; } 
  
Some really really long text that just is way too long so we must use ellipses to shorten it until the user wants to see it all.

Show All