html span 充满父布局,计算无​​限大父项中的HTML SPAN的可能宽度？

我能想到的最好方法是实际克隆并将span追加到文档中，放在一个无限大的容器中，并通过jQuery获取宽度。

HTML：

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.

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

});​