我正在尝试使用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);
});
关于我做错的任何想法?如果有办法更快地完成它(即冒泡排序),那也会很棒。
谢谢!
答案 0 :(得分:33)
为什么不使用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+(Safari 1.3 + / Chrome)和Opera 9+(版本&lt; 10.7需要-o-text-overflow
声明)中受支持
请注意,这个was unimplemented in Firefox直到7.0,而under 4%的Firefox用户仍在使用旧版本(大多数为3.6)。在旧版本中,您的文本仍将被截断,不会呈现省略号。如果您担心这一小组用户,可以使用this jQuery plugin,它在IE / WebKit / Opera /Firefox≥7中无效,但会在Firefox≤6中模拟text-overflow
。
答案 1 :(得分:3)
在这一行:
smaller_text = smaller_text.substr(0, (smaller_text-1));
您可能有意
smaller_text = smaller_text.substr(0, (smaller_text.length-1));
这可以解决问题吗?
答案 2 :(得分:0)
谢谢,我让它运转了 - 但它只适用于第一项并停止,这是否与我声明变量的方式有关?
这是当前的代码:
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;
}
}
答案 3 :(得分:0)
该函数用于检查文本,以像素为单位的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;
}
答案 4 :(得分:0)
如果你有文字,并且知道你想要的尺寸,为什么不直接使用substr?
我做了类似的事情
$('#history-1').text( $('#history-1').text().trim().substr(0,32) + "..." )