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