19

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

这是我的问题的演示。

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

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

请参阅小提琴以获取更多详细信息。

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

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

更新要求：我不允许更改源 HTML 或 CSS 中的任何内容。但是我可以用 jQuery 做任何我想做的事情来修改文档，这样我就可以检测到那些太宽的元素。

4

6 回答 6

14

正如其他人所说，暂时将文本节点包装在一个内联元素中。

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/

于 2012-04-23T09:16:05.727 回答
14

scrollWidth 会这样做：

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

这将输出 212px，即您正在寻找的实际宽度。

于 2015-12-09T10:22:57.547 回答
6

这种效果称为“收缩包装”，有几种方法可以确定元素的“真实”宽度。

漂浮

您可以使用的一种方法是浮动您的<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();
于 2012-04-23T08:56:38.133 回答
1

应用word-wrap: break-word;到它..所以单词会中断并且不会有任何文本从容器中流出......顺便说一句，您无法检查从容器中流出的文本的宽度。

例子

更新：您可以像这样检查其中文本的宽度是否大于容器的宽度

于 2012-04-23T08:51:18.163 回答
1

正如其他人所指出的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));
于 2017-05-12T10:42:38.607 回答
0

元素本身被限制为 200px，但里面的文本溢出了。如果您在 P 标签内插入一个跨度（或任何其他内联元素），它可以正常工作。

http://jsfiddle.net/will/vv68y/5/

希望有帮助:)

于 2012-04-23T08:48:52.037 回答