如何使用javascript获取脱离其容器的元素的宽度？

我想为WordPress制作一个小插件，用于检查是否有任何标题脱离其容器，并且字体大小应进行编辑

我的PHP贯穿每一页和每一篇文章的所有标题。然后，它从标题中取出每个单词，并将它们放入一个数组中。然后，它检查所有标题上最长的单个单词，并将其呼出

然后，我想使用javascript来警告网站中最长的单词是否不适合其容器，这样我就可以使用响应式设计，并为所有窗口大小插入正确的字体大小

这是我的PHP（它可以工作，但我是一名设计师，所以这可能是垃圾。当然，你可以建议改进）：

$all=array（）；
//职位
$custom_query=new WP_query（'cat=-999999'）；
而（$custom_query->have_posts（））：$custom_query->the_post（）；
$title=获取标题（）；
$pieces=分解（“，$title”）；
$all=数组\合并（$pieces，$all）；
结束时；
wp_reset_postdata（）；
//页数
查询帖子（'post_type=page&posts_per_page=9999999'）；
if（have_posts（））：while（have_posts（））：the_post（）；
$title=获取标题（）；
$pieces=分解（“，$title”）；
$all=数组\合并（$pieces，$all）；
结束时；
endif；
$length=数组映射（$strlen'，$all）；
$maxLength=最大（$Length）；
$index=array\u search（$maxLength，$length）；
$longestHeading=$all[$index]；
“回声”$最长的标题。"";

标题的宽度等于其容器的宽度，尽管它会断裂。我想知道它是否会爆发并且比容器长，然后提醒用户

---

谢谢大家!

要获得

h1

的实际值，需要添加两个属性：

div{
  width:300px;
  border:1px dashed grey;
  white-space:nowrap;
}

添加

nowrap

以避免标题在行中打断。以及：

h1 {
  display:inline-block;
}

添加

内联块

以中断h1的块状态，保持其内容的宽度

---

检查

空白处：nowrap声明实际上可以添加到

h1

元素中。很好！谢谢你，丹科。出于某种原因，我以前从未使用过CSS空白属性。这只是解决方案的一部分，因为h1的容器不应该是“溢出：隐藏”，否则JS计算的实际宽度将不是总的实际大小。

h1 {
  display:inline-block;
}