Question

79

Get real width of elements with jQuery

rated 0 times [ 86] [ 7] / answers: 1 / hits: 37466 / 12 Years ago, mon, april 23, 2012, 12:00:00

I am writing a validator for visual correctness of html files. The goal is to detect too wide elements.

The dotted red line is an indicator of the max width of the document (200px in this example). The first paragraph is fine, but the second is too wide. Nevertheless, all of the following commands still return 200px as the width:

// all return 200, but the value should be larger   

$('#two').width();

$('#two').outerWidth();

$('#two').prop('clientWidth');

Please see the Fiddle for more details.

How can i detect such oversized elements?

Updated question: Better to ask, how can i detect text that exceeds the borders of their parent elements?

Updated requirement: I am not allowed to change anything in the source HTML or CSS. But i can do anything i want with jQuery to modify the document, so that i can detect those too wide elements.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

reed

Add To Favorites

Follow

Total Points: 725

Total Questions: 85

Total Answers: 89

Location: Singapore

Member since Sat, Jul 25, 2020

4 Years ago

reed questions

1 npx react-native link command not working in latest version of react native. How can we link custom font family in my project

Tue, Jul 5, 22, 00:00, 2 Years ago

1 Alpine.js: How do I access x-data from a function in an external file?

Fri, Apr 16, 21, 00:00, 3 Years ago

1 I have an error : Cannot find module './utils'

Sun, Aug 16, 20, 00:00, 4 Years ago

1 react drag,drop, and connect arrow(or anything else) with animation between elements

Tue, Jun 16, 20, 00:00, 4 Years ago

1 Lodash.uniqueId always returns 1

Thu, May 23, 19, 00:00, 5 Years ago

View All

answered 12 Years ago collinarnoldp · Accepted Answer

As others have said, temporarily wrap the text node in an inline element.

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/

Here is a getInnerWidth function that should be useful to you. Pass it an element and it will handle the wrapping and unwrapping.

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/