在发表文章的时候,如果标题中有长串的数字和英文字符,例如文件的路径、注册表路径、下载地址等,通常不能自动换行,从而造成溢出的部分要么延伸到侧边栏中,要么被隐藏,这都是不正常的。如下图所示:
解决这个问题的方法就是要在CSS样式表中加入换行控制代码。
操作方法如下:
1.用FireFox中的Firebug查看页面中标题的源代码
可以看到,Title部分的标题的源代码对应的是entry-title
,字体大小为h2
。
2.修改对应主题的样式表(style.css
),以Twenty Fifteen
为例,在外观
->编辑
->style.css
,源代码中搜索entry-title
可以发现比较多,如下两处:
1 2 3 4 5 6 7 |
.entry-title, .widecolumn h2 { font-size: 35px; font-size: 3.5rem; line-height: 1.2; margin-bottom: 1.2em; } |
1 2 3 4 5 6 |
.entry-title { font-size: 26px; font-size: 2.6rem; line-height: 1.1538; margin-bottom: 0.9231em; } |
我们增加word-wrap:break-word;word-break:break-all;
告诉浏览器标题超长之后,主动换行,修改后的结果如下所示:
1 2 3 4 5 6 7 8 9 |
.entry-title, .widecolumn h2 { font-size: 35px; font-size: 3.5rem; line-height: 1.2; margin-bottom: 1.2em; word-wrap:break-word; word-break:break-all; } |
1 2 3 4 5 6 7 8 |
.entry-title { font-size: 26px; font-size: 2.6rem; line-height: 1.1538; margin-bottom: 0.9231em; word-wrap:break-word; word-break:break-all; } |
如此修改之后,如果使用了WP Super Cache
,则需要刷新缓存,如果没有使用WP Super Cache
则直接刷新页面就可以了。
修改后的页面如下所示:
注意,只设置word-wrap:break-word;
就可以满足需求,建议同时设置word-break:break-all;
,效果会更好一些。
对于手机端来说,标题是h1
大小的。使用Chrome查看手机端的网页的源代码是view-source:www.mobibrw.com
就可以看到手机网页的源代码了。