我正在为html文件的“视觉正确性”写一个验证器。目标是检测过宽的元素。
红色虚线表示文档的最大宽度(本例中为200px)。第一段很好,但第二段太宽了。尽管如此,以下所有命令仍然返回"200px“作为宽度:
// all return 200, but the value should be larger
$('#two').width();
$('#two').outerWidth();
$('#two').prop('clientWidth');
有关更多详细信息,请参阅Fiddle。
如何检测这种过大的元素?
更新的问题:最好问一问,我如何检测超出父元素边界的文本?
更新的要求:我不被允许改变任何在源代码中的HTML或CSS。但是我可以用jQuery做任何我想做的事情来修改文档,这样我就可以检测出那些太宽的元素。
发布于 2012-04-23 17:16:06
正如其他人所说,将文本节点临时包装在内联元素中。
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;
}
发布于 2015-12-09 18:22:58
scrollWidth将做到这一点:
$("#two").get().scrollWidth或getElementById("two").scrollWidth
这将输出212px,即您正在寻找的实际宽度。
发布于 2012-04-23 16:56:38
这种效果被称为"shrinkwrapping",有几种方法可以确定元素的“实际”宽度。
浮动
你可以使用的方法之一是浮动你的<p>
元素,这将强制它尽可能的小,但是如果你的div中的任何东西是浮动的,你将需要使用一个clearfix:
#two { float: left; }
内联块元素
插入内联元素应该可以。
<p>content</p>
会变成
<p><span>content</span></p>
绝对定位元素
将元素位置更改为绝对位置也应该有效:
#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($("<span>").html(t))
.width();
https://stackoverflow.com/questions/10277323
复制相似问题