Question

In Javascript or jQuery, I want to calculate the width a specific SPAN element would be if its parent were infinitely large? (ie its “prefered” width)

What is the cleanest way to do this?

Answer 1

The best way I can think of is to actually clone and append the span to the document, in an infinitely large container, and get its width via jQuery.

HTML:

<span id="myspan">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies pulvinar felis, nec posuere lectus mattis et. Aliquam erat volutpat. Donec non turpis vitae nunc placerat scelerisque. Nunc scelerisque lobortis lacus at hendrerit. Curabitur convallis euismod congue. Sed venenatis pulvinar magna vel cursus. Sed eleifend mi eget mi fringilla non euismod arcu venenatis. Proin interdum scelerisque diam. In ut nisi id sem imperdiet euismod. Duis vitae lorem ut mauris auctor vehicula non vel risus.
</span>

JS:

function getPrefferedWidth($el){
    var clone = $el.clone(),
    parent = $el && $el.parent().length>0 ? $el.parent() : $('body'),
    container = $(document.createElement('div')),
    wrapper = $(document.createElement('div'));

    container.css({overflow: 'visible',width: '10000000px'});
    wrapper.css({overflow: 'hidden', width: 0});

    container.append(clone);
    wrapper.append(container);
    parent.append(wrapper);

    var width = clone.width();
    wrapper.remove();

    return width;
}
$(document).ready(function(){
    alert(getPrefferedWidth($('#myspan')));
});

Now the fact that css does not allow you to have infinite width, and if you span contains inline text, you could use the css rule white-space: nowrap. This way there will be no line-breaks on your span and it will stretch horizontally towards infinity! It might be cleaner:

function getPrefferedWidth($el){
    var clone = $el.clone(),
    parent = $el && $el.parent().length>0 ? $el.parent() : $('body'),
    container = $(document.createElement('div'));

    clone.css({'white-space':'nowrap'});
    container.css({overflow: 'hidden', width: 0, height: 0});

    container.append(clone);
    parent.append(container);

    var width = clone.width();
    container.remove();
    return width;
}
$(document).ready(function(){
    alert(getPrefferedWidth($('#myspan')));
});​