Question

我想为WordPress制作一个小插件，检查是否有任何标题突破其容器并且应该编辑字体大小。

我的PHP通过每个页面和每篇文章的所有标题。然后它将每个单词从标题中取出并将它们放入数组中。然后它检查所有标题上最长的单个单词并回显它。

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

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

$all = array();

// posts
$custom_query = new WP_Query('cat=-999999'); 
while($custom_query->have_posts()) : $custom_query->the_post(); 
$title  = get_the_title();
$pieces = explode(" ", $title);
$all = array_merge($pieces, $all);
endwhile;
wp_reset_postdata();

//pages
query_posts( 'post_type=page&posts_per_page=999999999' ); 
if (have_posts()) : while (have_posts()) : the_post(); 
$title  = get_the_title();
$pieces = explode(" ", $title);
$all = array_merge($pieces, $all);
endwhile; 
endif; 

$lengths = array_map('strlen', $all);
$maxLength = max($lengths);
$index = array_search($maxLength, $lengths);
$longestHeading = $all[$index];

echo "<h1>" .  $longestHeading . "</h1>";

我的JS作为codepen：http://codepen.io/ketri/pen/knozu

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

谢谢！

Answer 1

要获得h1的实际价值，您需要添加两个属性：

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

添加nowrap以避免行中的标题中断。和

h1 {
  display:inline-block;
}

添加inline-block以打破h1的阻止状态，保持其内容的宽度。

检查CodePen

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

1 个答案: