找到使用 jQuery 完整显示项目所需的最小宽度？答案

【问题标题】：Find min width required to display item in full with jQuery?找到使用 jQuery 完整显示项目所需的最小宽度？
【发布时间】：2011-09-21 23:56:01
【问题描述】：

是否可以找到完全显示 div 所需的像素数？

现在，我的 div 是 100%，但我真的希望它和内容一样小……（不能使用浮点数或其他 css 技巧）。

【问题讨论】：

你的问题没有真正的意义，或者至少有点不清楚。可以加点代码吗？
请添加相关的HTML。如何做到这一点完全取决于内容。

标签： jquery width css

【解决方案1】：

这个问题可能取决于内容，所以在没有看到您的 HTML 的情况下，我们只能猜测，但 div 调整自身大小以适应其内容的唯一方法是 position: absolute。

因此，您可以使用这样的函数来让 div 临时换行到其内容，以便您可以测量内容的宽度。然后，您可以根据需要使用该宽度来设置它的大小：

function measureWidth(selector) {
    var item = $(selector).eq(0);     // just first item
    var pos = item.css("position");   // save original value
    item.css("position", "absolute");
    var width = item.width();
    item.css("position", pos);
    return(width);
}

var width = measureWidth("#header");

你可以在这里看到它的工作原理：http://jsfiddle.net/jfriend00/L2J5w/

仅供参考，我从 jQuery 中学到了这项技术。它在内部使用它来测量某些东西的宽度。它甚至有一个名为 .swap() 的内部（未记录）函数，用于保存一组 CSS 属性的值，将这些 CSS 属性设置为其他值，进行测量，然后将 CSS 属性恢复为其原始值.

【讨论】：

【解决方案2】：

如果您不将div 宽度设置为100% 并设置display: inline，那么它应该只占用与内容一样多的空间，只要它不溢出即可。

如果内容确实溢出了，当滚动条出现时，它会告诉你内容的 div 的宽度

$("#mydivid")[0].scrollWidth

【讨论】：