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;
}
代码块保留格式并支持横向滚动
代码中的缩进、空格和长命令通常具有语义,不应为了适配窄屏而强制断行。保留原始格式,并在内容超过容器宽度时提供横向滚动,可以兼顾可读性和移动端布局。
/* 保留代码格式,超出容器宽度时横向滚动 */
.post-content pre {
white-space: pre !important;
overflow-x: auto !important;
overflow-y: hidden !important;
word-wrap: normal !important;
}
为什么这样做?
此前的主题模板样式为了追求极简,在多个地方限制了标题只能单行显示white-space: nowrap。这些修改通过!important强制覆盖了那些旧规则,从底层确保了无论是在搜索列表预览、搜索结果主页还是文章详情页,长标题都能优雅地分行展示。