javascript - 無限に大きな親でHTML SPANの幅を計算していますか?

Question

Javascript または jQuery で、親が無限に大きい場合に特定の SPAN 要素の幅を計算したいですか? (つまり、「優先」幅)

これを行う最もクリーンな方法は何ですか?

Answer 1

私が考えることができる最善の方法は、実際にスパンを複製してドキュメントに追加し、無限に大きなコンテナに入れ、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')));
});

css では幅を無限にすることはできないため、spanインライン テキストが含まれている場合は css rule を使用できますwhite-space: nowrap。このようにして、スパンに改行がなくなり、水平方向に無限に伸びます! それはよりきれいかもしれません：

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')));
});​