根据文本长度自动在表格中显示更多/更少的文本 [英] Show more/less text in a table automatically according to text length
问题描述
我有一个有两列的表,第二个有时包含大文本,所以我只想显示前100个字符,并显示更多链接以显示剩余的文本。你可以在这里看到我正在使用的表格 http://jsfiddle.net/j11mj21x/ 。
I have a table with two columns, the second one sometimes contains big text so I want to show only the first 100 characters and put a show more link to display the remaining text. You can see here what Table I am working on http://jsfiddle.net/j11mj21x/.
为此,我使用此链接中提供的代码( http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/ ),我把它放在一个文件show_less_more.js中:
For that I am using a code provided in this link (http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/), I put it in a file 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 + '<span class="moreellipses">' + config.ellipsesText + ' </span><span class="morecontent"><span>' + h + '</span> <a href="#" class="morelink">' + config.moreText + '</a></span>';
$this.html(html);
$(".morecontent span").hide();
}
});
};
})(jQuery);
$(document).ready(function(){$(".descriptionText").shorten();});
我这样使用它:
<script src="show_less_more.js"></script>"
每行的HTML都是这样的:
The HTML is like this for every row:
<tr>
<th>
course1
</th>
<td> <div class="descriptionText">Description of the course</div></td>
</tr>
我还为越来越少的链接添加了CSS:
I have also added the CSS for the more and less links:
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页面中呈现的内容:
When I do this in sfiddle it works pretty good as you can see here http://jsfiddle.net/j11mj21x/2/ However, I get nothing when rendering my table with python. I think the problem is that I don't succeed to load my JS page into the html page, because when I click on it it give nothing. Here is what is rendered in my html page:
....
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"><!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"><!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
</script><script src="showLessMore.js"></script>
....
谁能告诉我这可能是什么问题因为我将show_less_more.js放在与python中的文件生成器相同的文件夹中?
Can anyone tell me what could be the problem behind this because I have the "show_less_more.js" in the same folder as the file generator which in python?
提前谢谢!
推荐答案
这是一个简单的例子,可以更多地依赖CSS。
Here's a simple example of doing this relying more on CSS.
$(function() {
$('a').click(function() {
$('div').removeClass('ellipsis');
});
});
div {
border: solid 1px orange;
width: 200px;
overflow: hidden;
}
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='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.</div>
<br>
<a href='#'>Show All</a>
这篇关于根据文本长度自动在表格中显示更多/更少的文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!