Получить реальную ширину элементов с помощью jQuery

Я пишу валидатор для "визуальной корректности" html файлов. Цель состоит в том, чтобы обнаружить слишком широкие элементы.

Вот демонстрация моей проблемы.

Пунктирная красная линия является индикатором максимальной ширины документа (200px в этом примере). Первый абзац хорош, но второй слишком широк. Тем не менее, все следующие команды по-прежнему возвращают "200px" в качестве ширины:

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

Подробнее см. Fiddle.

Как я могу обнаружить такие негабаритные элементы?

Обновленный вопрос:. Лучше спросить, как я могу обнаружить текст, который превышает границы их родительских элементов?

Обновленное требование: Мне не разрешено ничего менять в исходном HTML или CSS. Но я могу делать все, что хочу, с помощью jQuery, чтобы изменить документ, чтобы я мог обнаруживать те слишком широкие элементы.

Ответ 1

Как говорили другие, временно оберните текст node встроенным элементом.

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 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/

Ответ 2

scrollWidth сделает это:

$( "# два" ). Получить() [0].scrollWidth или getElementById ( "два" ). scrollWidth

это выводит 212px, реальную ширину, которую вы ищете.

Ответ 3

Этот эффект называется " shrinkwrapping", и существует несколько способов определить "реальную" ширину элемента.

Float

Один из способов, которыми вы можете использовать, - это поместить ваш элемент <p>, который заставит его как можно меньше, но вам нужно будет использовать clearfix, если что-либо внутри вашего div плавает:

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

Ответ 4

Примените word-wrap: break-word; к нему.. поэтому слово сломается, и из контейнера не будет никакого текста... btw вы не можете проверить ширину текста, который выходит из контейнера.

Пример

Обновление:. Вы можете проверить, больше ли ширина текста в нем, чем ширина контейнера, например this

Ответ 5

Как отмечали другие, также работает изменение 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));

Ответ 6

Сам элемент ограничен 200px, но текст внутри разливается. Если вы вставляете span (или любой другой встроенный элемент) внутри тега P, он отлично работает.

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

Надеюсь, что помогает:)