艾Q网

标题: jquery控制行数和字数 [打印本页]

作者: admin    时间: 2023-11-19 09:51
标题: jquery控制行数和字数
jQuery是一种流行的JavaScript库,它可以简化JavaScript编程的操作。在网站开发中,我们常常需要控制行数和字数以使页面更加美观、易读。下面将介绍如何使用jQuery来实现这个需求。

// 限制行数
$(document).ready(function(){
var lineHeight = parseInt($('p').css('line-height'), 10);
var maxLines = 3;
$('p').each(function(){
var text = $(this).text();
var height = $(this).height();
var lines = height / lineHeight;
if(lines >maxLines){
var textArr = text.split('');
var result = '';
for(var i = 0; i< maxLines * 20; i++){
result += textArr[i];
}
result += '...';
$(this).text(result);
}
});
});
// 限制字数
$(document).ready(function(){
$('p').each(function(){
var text = $(this).text();
if(text.length >100){
var result = text.substr(0, 100) + '...';
$(this).text(result);
}
});
});






欢迎光临 艾Q网 (http://www.iqiok.com/bbs/) Powered by Discuz! X3.4