根据像素宽度使用jQuery截断文本
我正在尝试使用jquery编写一个快速函数，该函数计算html页面上字符串的像素宽度，然后截断字符串，直到它达到理想的像素宽度……
但是它不工作(文本不会被截断)……
下面是我的代码：
function constrain(text, original, ideal_width){
var temp_item = ('<span class="temp_item" style="display:none;">'+ text +'</span>');
$(temp_item).appendTo('body');
var item_width = $('span.temp_item').width();
var ideal = parseInt(ideal_width);
var smaller_text = text;
while (item_width > ideal) {
smaller_text = smaller_text.substr(0, (smaller_text-1));
$('.temp_item').html(text);
item_width = $('span.temp_item').width();
}
var final_length = smaller_text.length;
if (final_length != original) {
return (smaller_text + '…');
} else {
return text;
}
}下面是我在页面中调用它的方式：
$('.service_link span:odd').each(function(){
var item_text = $(this).text();
var original_length = item_text.length;
var constrained = constrain(item_text, original_length,175);
$(this).html(constrained);
});知道我哪里做错了吗？如果有更快的方法(如冒泡排序)，那就太好了。
谢谢!
回答 4
Stack Overflow用户
发布于 2010-11-19 22:24:35
与其将其与脚本结合使用，为什么不直接使用CSS来指定要放入此字符串的元素的宽度呢？您可以使用text-overflow来告诉浏览器应该用省略号截断。
.truncated { display:inline-block; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }text-overflow是一个CSS3声明，但在IE 6+、WebKit 312.3+ (Safari1.3+/Chrome)和Opera 9+ ( 10.7以下版本需要-o-text-overflow声明)中受支持。
请注意，这个was unimplemented in Firefox直到7.0，火狐用户的under 4%仍在使用旧版本(大多数是3.6)。在旧版本中，您的文本仍将被截断，只是不会呈现省略号。如果你担心这一小部分用户，你可以使用this jQuery plugin，它在IE/WebKit/Opera/FirefoxFirefox7中什么也不做，但会在≥≤6中模拟text-overflow。
Stack Overflow用户
发布于 2009-05-22 00:32:33
谢谢，我让它工作了-但它只在第一个项目上工作，然后停止，这与我声明变量的方式有关吗？
下面是当前的代码：
function constrain(text, original, ideal_width){
var temp_item = ('<span class="temp_item" style="display:none;">'+ text +'</span>');
$(temp_item).appendTo('body');
var item_width = $('span.temp_item').width();
var ideal = parseInt(ideal_width);
var smaller_text = text;
while (item_width > ideal) {
smaller_text = smaller_text.substr(0, (smaller_text.length-1));
$('.temp_item').html(smaller_text);
item_width = $('span.temp_item').width();
}
var final_length = smaller_text.length;
if (final_length != original) {
return (smaller_text + '…');
} else {
return text;
}
}Stack Overflow用户
发布于 2009-12-09 23:15:32
该函数接受要检查的文本、以像素为单位的ideal_width和css的类名。如果ideal_width小于文本宽度，则截断并添加hellip，否则返回未修改的文本。简单且有效！:-)
function constrain(text, ideal_width, className){
var temp_item = ('<span class="'+className+'_hide" style="display:none;">'+ text +'</span>');
$(temp_item).appendTo('body');
var item_width = $('span.'+className+'_hide').width();
var ideal = parseInt(ideal_width);
var smaller_text = text;
if (item_width>ideal_width){
while (item_width > ideal) {
smaller_text = smaller_text.substr(0, (smaller_text.length-1));
$('.'+className+'_hide').html(smaller_text);
item_width = $('span.'+className+'_hide').width();
}
smaller_text = smaller_text + '…'
}
$('span.'+className+'_hide').remove();
return smaller_text;
}https://stackoverflow.com/questions/895888
复制相似问题