jQuery while 循环过早停止

Question

我正在开发我的第一个 Wordpress 插件，一个简单的链接元素周期表短代码。在其中，我设置了一个 jQuery 脚本，该脚本可以缩小表格中的字体大小以适合其父级。但是，循环会短暂停止，将表格的一部分留在父级的填充中。有人可以告诉我我在这里做错了什么吗？

我的 JavaScript:

jQuery(".periodic-table").each(function(index, element) {
    var textSize = 100;
    while (jQuery(element).width() > jQuery(element).parent().width()) {
        textSize -= 1;
        jQuery(element).css('font-size', textSize);
    }
});

以及完整的项目: https://github.com/Renkin42/WP_Plugin_PeriodicTable

编辑:我已经提供了 jsfiddle 版本，但由于某种原因它的行为根本不一样。这个看起来更可靠，但由于某种奇怪的原因往往会过度调整，使其比应有的更小而不是更大。不管怎样，给你:https://jsfiddle.net/rsvjwy2b/1/

Answer 1

您的问题源于您的错误假设，即仅仅因为子项的内容超出了其父项的范围，子项的宽度就大于父项的宽度。

如果没有看到你的 HTML，我猜它是这样的:

<div class="wrap">
    <div class="periodic-table">Hello There! Hello There!</div>
</div>

当您执行代码时，它会比较两个元素的宽度，发现子元素已经与父元素大小相同或小于父元素，然后退出而不执行任何操作。文本突出，但这仅意味着内容溢出了 .periodic-table，而不是 .wrap。

您可以通过赋予.periodic-table显示属性inline(或inline-block)来解决此问题

.periodic-table {
    display: inline;
}

内联元素的宽度基于内容 - 溢出不是等式的一部分。您当前的工作仅此即可。

Fiddle