修改hexo字体大小与CSS文字溢出边框问题

新换了Melody主题后,总是感觉有哪里不对劲,仔细想了想原来是这个主题的字体太小了,看上去很不舒服

于是乎在网上搜了一下如何修改字体,https://www.jianshu.com/p/02fbd409988c

对照这篇文章,我在 melody\source\css\var.styl 找到了可修改之处

1
2
3
$font-size = 14px  
//修改为
$font-size = 16px

可万万没想到,修改了字体后,在移动端的博客文章底部,却出现了文字溢出边框的问题

经过了几番查找,在 melody\source\css\_layout\post.styl 找到了可修改之处

1
2
3
4
5
6
7
8
a
color: $a-link-color
transition: all 0.2s
//修改为
a
color: $a-link-color
transition: all 0.2s
word-break: break-all

可以看到已解决文字溢出问题,但换行并不完全能够令人满意

随后我又在chrome的控制台瞎折腾,竟然意外在代码自动补全中发现了一个从来没有在网上的相关搜索中见过的属性break-word

尝试了一下,修改css为

1
2
3
4
a
color: $a-link-color
transition: all 0.2s
word-break: break-word

完美解决!!!!(我只是想改个字体结果折腾了一个小时好气哦!!!)

文章目录
|