計算無​​限大父項中的HTML SPAN的可能寬度？

Question

在Javascript或jQuery中，我想計算一個特定的SPAN元素的寬度，如果它的父元素無限大？ （即其「優選」寬度）

這是乾淨的方法嗎？

Answer 1

我能想到的最好方法是實際克隆並將span追加到文檔中，放在一個無限大的容器中，並通過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規則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'))); 
});​