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

我正在为 html 文件的“视觉正确性”编写一个验证器。目标是检测太宽的元素。

这是我的问题的演示。 http://jsfiddle.net/vv68y/2/

红色虚线表示文档的最大宽度（本例中为 200px）。第一段很好，但第二段太宽了。尽管如此，以下所有命令仍然返回“200px”作为宽度：

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

请参阅Fiddle http://jsfiddle.net/vv68y/2/更多细节。

我怎样才能检测到这种超大的元素？

更新的问题：更好地问，我如何检测超出其父元素边框的文本？

更新后的要求：我不允许更改源 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);

http://jsfiddle.net/vv68y/12/ 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/ http://jsfiddle.net/vv68y/13/