详情页主标题换行修复

针对文章详情页的超长标题,移除了强制单行显示的限制,并设置了断词规则。

/* 修复详情页标题换行 */
.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强制覆盖了那些旧规则,从底层确保了无论是在搜索列表预览、搜索结果主页还是文章详情页,长标题都能优雅地分行展示。