Hugo 主题模板详情页主标题和代码换行修复
详情页主标题换行修复
针对文章详情页的超长标题,移除了强制单行显示的限制,并设置了断词规则。
/* 修复详情页标题换行 */
.post-title,
article.post h1,
.app-container article h1 {
white-space: normal !important; /* 允许换行 */
word-wrap: break-word !important; /* 强制长单词断行 */
overflow-wrap: break-word !important;
line-height: 1.3 !important; /* 优化多行行间距 */
display: block !important;
}
正文区域防溢出保护
防止文章中的长链接、超长连续字符撑破容器,确保文字始终在可视范围内。
/* 确保正文内容不会溢出 */
.post-content {
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
代码块自动换行
针对嵌入代码极长的 HTML 代码行,将其从横向滚动改为自动换行,避免在窄屏下出现不协调的横向滚动条。
/* 让长代码或长链接在代码块中也能换行 */
.post-content pre {
white-space: pre-wrap !important; /* 保留空格但允许换行 */
word-wrap: break-word !important;
}
为什么这样做?
此前的主题模板样式为了追求极简,在多个地方限制了标题只能单行显示white-space: nowrap。这些修改通过!important强制覆盖了那些旧规则,从底层确保了无论是在搜索列表预览、搜索结果主页还是文章详情页,长标题都能优雅地分行展示。