使用jQuery获取元素的真实宽度

Question

我正在为html文件的"视觉正确性"编写验证器.目标是检测太宽的元素.

这是我的问题的演示.

红色虚线表示文档的最大宽度(本例中为200px).第一段很好,但第二段太宽了.尽管如此,以下所有命令仍然返回"200px"作为宽度:

// all return 200, but the value should be larger   
$('#two').width();
$('#two').outerWidth();
$('#two').prop('clientWidth');

有关详细信息,请参阅小提琴.

我如何检测这种超大元素？

更新的问题:最好问一下,我如何检测超出其父元素边界的文本？

更新的要求:我不允许更改源HTML或CSS中的任何内容.但我可以用jQuery做任何我想要的东西来修改文档,这样我就可以检测到那些太宽的元素.

Answer 1

scrollWidth会这样做:

$("#two").get()[0] .scrollWidth或getElementById("two").scrollWidth

这输出212px,您正在寻找的实际宽度.

Answer 2

正如其他人所说,暂时将文本节点包装在内联元素中.

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);

http://jsfiddle.net/vv68y/12/

这是一个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;

}

http://jsfiddle.net/vv68y/13/

Answer 3

这种效果称为" 收缩包装 ",有几种方法可以确定元素的"实际"宽度.

浮动

你可以使用的方法之一是浮动你的<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();