使用jQuery获取元素的真实宽度
我正在为html文件的“视觉正确性”编写validation器。 目标是检测太宽的元素。
这是我的问题的演示。
红色虚线表示文档的最大宽度（本例中为200px）。 第一段很好，但第二段太宽了。 尽管如此，以下所有命令仍然返回“200px”作为宽度：
// all return 200, but the value should be larger $('#two').width(); $('#two').outerWidth(); $('#two').prop('clientWidth'); 请参阅小提琴了解更多详情。
我如何检测这种超大元素？
更新的问题：最好问一下，我如何检测超出其父元素边界的文本？
更新的要求：我不允许更改源HTML或CSS中的任何内容。 但我可以做任何我想用jQuery来修改文档，这样我就可以检测到那些太宽的元素。
正如其他人所说，暂时将文本节点包装在内联元素中。
var two = document.getElementById('two'), text = two.firstChild, wrapper = document.createElement('span'); // wrap it up wrapper.appendChild(text); two.appendChild(wrapper); // better than bad, it's good. console.log(wrapper.offsetWidth); // put it back the way it was. two.removeChild(wrapper); two.appendChild(text);
这是一个对你有用的getInnerWidth函数。 传递一个元素，它将处理包装和展开。
function getInnerWidth(element) { var wrapper = document.createElement('span'), result; while (element.firstChild) { wrapper.appendChild(element.firstChild); } element.appendChild(wrapper); result = wrapper.offsetWidth; element.removeChild(wrapper); while (wrapper.firstChild) { element.appendChild(wrapper.firstChild); } return result; }
scrollWidth会这样做：
$（“＃two”）。get（）[0] .scrollWidth或getElementById（“two”）。scrollWidth
这输出212px，您正在寻找的实际宽度。
这种效果称为“ 收缩包装 ”，有几种方法可以确定元素的“实际”宽度。
浮动
你可以使用的一种方法是浮动你的
元素，这将迫使它尽可能小，但如果div中的任何东西是浮动的，你需要使用clearfix ：
#two { float: left; }
内联块元素
插入内联元素应该有效。
content
会成为
content
绝对定位的元素
将元素位置更改为绝对位置也应该有效：
#two { position: absolute; }
如果您无法静态更改标记或样式，则可以始终通过JavaScript动态更改它们。
（绝对定位元素）
var realWidth = $("#two").css("position", "absolute").width();
（浮动）
var realWidth = $("#two").css("float", "left").width();
（内联块元素）
var t = $("#two").html(); var realWidth = $("#two") .empty() .append($("").html(t)) .width();
应用word-wrap: break-word; 它…所以这个词会破坏，并且不会有任何文本从容器中出来…顺便说一句，你无法检查从容器中出来的文本的宽度。
例
更新：您可以检查其中的文本宽度是否大于容器的宽度，如下所示
正如其他人所指出的那样，将元素的position改为absolute也是有效的。 这样做会导致内联风格，如果你不注意，可能会在你的CSS后乱。 这是一个解决方案，以再次摆脱内联样式。
//Change position to absolute $('#two').css("position", "absolute"); var textWidth = $('#two').width(); //Get rid of the inline style again $('#two').removeStyle("position"); //Plugin format (function ($) { $.fn.removeStyle = function (style) { var search = new RegExp(style + '[^;]+;?', 'g'); return this.each(function () { $(this).attr('style', function (i, style) { return style.replace(search, ''); }); }); }; }(jQuery));