YIA主题列表页和文章页的标题有一段空白是怎么回事？

平时发布的文章都显示很正常，有一天发布的文章标题中包含有一个长长的英文和_组合而成的字符串，结果就出现了标题有一段空白的情况。具体如下所示：

1、文章列表页中的标题有空白

2、文章页面中的标题也有空白

这是默认的换行行为，即是单词不会被分割，会根据容器的宽度自动换行。因为_wp_page_template在第一行显示不完，但是又不允许单词被分割换行，所以它只能另起一行显示了，这样就会导致第一行右侧有一大段空白。

如果想要解决这个问题，只需要找到列表页和文章页标题对应的CSS代码，并添加以下CSS代码来允许单词可以被分割，这样就会强制换行。

word-break: break-all

强制单词分割换行的效果如下图所示：

比如boke112百科站点这样的布局，只需要编辑YIA主题的style.css文件，找到以下代码：

.post-list.layout-default h2{
margin-top: -4px;
}

修改为

.post-list.layout-default h2 {
margin-top: -4px;
word-break: break-all;
}

找到以下代码

.single .page-title {
margin-bottom: 0;
}

修改为

.single .page-title {
margin-bottom: 0;
word-break: break-all;
}

本文地址：https://boke112.com/post/12135.html