我正在开发我的第一个 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/
最佳答案
您的问题源于您的错误假设,即仅仅因为子项的内容超出了其父项的范围,子项的宽度就大于父项的宽度。
如果没有看到你的 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;
}
内联元素的宽度基于内容 - 溢出不是等式的一部分。您当前的工作仅此即可。
关于jQuery while 循环过早停止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30365991/