我正在尝试使用jQuery计算文本宽度。我不确定是什么问题,但肯定出现了错误。
这是我的代码:
var c = $('.calltoaction');
var cTxt = c.text();
var cWidth = cTxt.outerWidth();
c.css('width' , cWidth);
我正在尝试使用jQuery计算文本宽度。我不确定是什么问题,但肯定出现了错误。
这是我的代码:
var c = $('.calltoaction');
var cTxt = c.text();
var cWidth = cTxt.outerWidth();
c.css('width' , cWidth);
这个方法对我来说效果更好:
$.fn.textWidth = function(){
var html_org = $(this).html();
var html_calc = '<span>' + html_org + '</span>';
$(this).html(html_calc);
var width = $(this).find('span:first').width();
$(this).html(html_org);
return width;
};
这是一个比其他发布的函数更好的函数,因为:
<input>
、<span>
或者 "string"
时可以工作。示例:http://jsfiddle.net/philfreo/MqM76/
// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com>
$.fn.textWidth = function(text, font) {
if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
$.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
return $.fn.textWidth.fakeEl.width();
};
$.fn.textWidth = function(){
var self = $(this),
children = self.children(),
calculator = $('<span style="display: inline-block;" />'),
width;
children.wrap(calculator);
width = children.parent().width(); // parent = the calculator wrapper
children.unwrap();
return width;
};
.html
。<span>
标签的结束括号之前缺少/
:calculator = $('<span style="display: inline-block;" />'),
- Petr R.提供的textWidth
函数接受一个字符串作为参数,但不会考虑前导和尾随空格(这些在虚拟容器中不会被呈现)。此外,如果文本包含任何HTML标记(子字符串<br>
将不会产生任何输出,
将返回一个空格的长度),则它们也无法工作。
对于接受字符串的textWidth
函数而言,这只是一个问题,因为如果给定DOM元素,并在该元素上调用.html()
,那么可能没有必要为这种用例进行修复。
但是,例如,如果您正在计算文本的宽度以动态修改用户输入时文本输入元素的宽度(我的当前用例),则可能希望使用
替换前导和尾随空格并将字符串编码为HTML。
我使用了philfreo的解决方案,这里是它的版本,可以解决这个问题(添加了注释):
$.fn.textWidth = function(text, font) {
if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').appendTo(document.body);
var htmlText = text || this.val() || this.text();
htmlText = $.fn.textWidth.fakeEl.text(htmlText).html(); //encode to Html
htmlText = htmlText.replace(/\s/g, " "); //replace trailing and leading spaces
$.fn.textWidth.fakeEl.html(htmlText).css('font', font || this.css('font'));
return $.fn.textWidth.fakeEl.width();
};
font-size
。我不得不添加css('font-size'), this.css('font-size'))
才能使其工作。有什么想法为什么只有font
不能复制该值? - iCollect.it Ltd.css
方法相同的位置,但我看到我的括号是错误的。应该是css('font-size', this.css('font-size'))
。 - iCollect.it Ltd由于不一致的盒子模型,当想要确定文本宽度时,jQuery的宽度函数可能有点棘手。确保的方法是在元素内部注入 div 来确定实际文本宽度:
$.fn.textWidth = function(){
var sensor = $('<div />').css({margin: 0, padding: 0});
$(this).append(sensor);
var width = sensor.width();
sensor.remove();
return width;
};
使用这个小插件,只需:
$('.calltoaction').textWidth();
span
替换它,你只会得到零。我在一个H2
上尝试了这个解决方案,其中父元素有溢出隐藏,但我只得到了文本的截断长度。也许解释一下这个应该如何工作会更好地发挥它的作用? - iCollect.it Ltd$.fn.textWidth = function(text){
var org = $(this)
var html = $('<span style="postion:absolute;width:auto;left:-9999px">' + (text || org.html()) + '</span>');
if (!text) {
html.css("font-family", org.css("font-family"));
html.css("font-size", org.css("font-size"));
}
$('body').append(html);
var width = html.width();
html.remove();
return width;
}
org.css("font-weight")
。此外,我认为 if(!text)
部分不直观。如果我使用例如 jQuery("#someContainer").textWidth("Lorem ipsum")
,我希望知道在该特定容器中应用“Lorem ipsum”时的文本宽度。 - Sleavely在元素的宽度固定时,无论是Rune还是Brain都不能正常工作。我做了类似于Okamera的事情,使用了更少的选择器。
编辑:
对于使用相对font-size
的元素,以下代码插入htmlCalc
元素到body
中,因此会失去关于父元素的信息,所以可能不起作用。
$.fn.textWidth = function() {
var htmlCalc = $('<span>' + this.html() + '</span>');
htmlCalc.css('font-size', this.css('font-size'))
.hide()
.prependTo('body');
var width = htmlCalc.width();
htmlCalc.remove();
return width;
};
this
已经是一个 jQuery 对象,因此 $(this)
是多余的。 - iCollect.it Ltd$.fn.textWidth = function(){
var calc = '<span style="display:none">' + $(this).text() + '</span>';
$('body').append(calc);
var width = $('body').find('span:last').width();
$('body').find('span:last').remove();
return width;
};
或者
function textWidth(text){
var calc = '<span style="display:none">' + text + '</span>';
$('body').append(calc);
var width = $('body').find('span:last').width();
$('body').find('span:last').remove();
return width;
};
如果你想先获取文本
$.fn.textWidth = function(){
var contents = this.contents(),
wrapper = '<span style="display: inline-block;" />',
width = '';
contents.wrapAll(wrapper);
width = contents.parent().width(); // parent is now the wrapper
contents.unwrap();
return width;
};