核心是结构先立住、语义不塌方、css不越界；须正确使用包裹完整语义单元，配合text-indent: 2em、font-size: 16px、line-height: 1.6及中英文两端对齐必要条件，方保长文可读性。

大篇幅中文网页排版，核心问题不是“怎么加样式”，而是**结构先立住、语义不塌方、CSS 不越界**——多数可读性差的页面，根源在 `

` 用错了，或根本没用 `

`。

用对 <p></p> 才算真正开始排版

浏览器默认给 `

` 加上下外边距（约 1em），这是段落呼吸感的物理基础。但很多人用 `
` 换行、用多个 `

` 堆出“空行”，或把整篇文章塞进一个 `

` 里，结果是：间距不可控、屏幕阅读器读不出段落边界、CSS `margin` 覆盖失效。

• 每个 `

  ` 必须包裹一个**完整语义单元**，比如“背景→问题→方案”各一段，而不是按字数硬切

  

  Html To Pdf

  使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

  下载
• 禁止在 `

  ` 里嵌套 `

  `、`

  `、`

  ` 等块级元素（HTML5 语法不允许）
  • 别用 `

    ` 控制对齐——改用 CSS 的 `text-align: center`，`align` 属性已废弃且在现代浏览器中可能被忽略

  • 移动端需显式写 `margin: 1.2em 0;`，避免某些安卓 WebView 对默认 margin 解析异常

  text-align: justify 对中文无效？得配 text-justify: inter-character

  纯 `

  ` 在中文段落里基本没反应，不是你写错了，是浏览器默认不给汉字之间插弹性间隙。想让中文真正两端对齐，必须组合生效：

  • 容器（如 `

    ` 或其父 `

    `）必须带 `lang="zh"` 属性，否则 Safari 17.4+ 会静默失效
  • CSS 必须同时写 `text-align: justify; text-justify: inter-character;`，缺一不可
  • 短段落（少于 4 行）可能末行仍左对齐——这不是 bug，是浏览器找不到足够换行点来均匀拉伸
  • 单行文本要用 `text-align-last: justify`，但 iOS Safari 14.5 以下不支持，旧设备会回退为左对齐

  首行缩进、行高、字号这三件事不能靠“感觉”

  中文阅读习惯依赖首行缩进 + 合理行高 + 稳定字号。这三个值一旦设错，长文立刻变催眠剂。

  • 首行缩进统一用 `text-indent: 2em;`（注意单位是 `em`，不是 `px`），避免 `text-indent: 32px` 在缩放时失准
  • 正文 `font-size` 必须显式声明 `16px`，别信 `100%` 或 `medium`——用户调过浏览器字号后，`100%` 可能变成 12px 或 20px，导致行高崩坏
  • `line-height` 推荐 `1.6`（无单位），它会随字号等比缩放；禁用 `line-height: 24px` 这类固定像素值，否则父级字体一变，文字就在容器里上下漂移
  • 避免混用 `` 标签设置字体——它已被废弃，且无法响应系统偏好（如深色模式、减少动画）

  段落分组与视觉隔离别用 `

  ` 硬套

  当长文要分章节、场景或角色切换时，直接 `

  ` 包一堆 `

  ` 是常见做法，但容易埋下样式冲突隐患。

  • 优先用 `
    ` 替代 `

    `，它自带语义，SEO 和辅助技术更友好

    若必须用 `

    `，请确保 `div.section > p:first-child { margin-top: 0; }`，否则顶部多出一倍段间距

    视觉分隔推荐用 `border-top: 1px solid #eee; padding-top: 1.5em;`，而非 `

    ---

    `——后者语义是“主题分隔”，不是“段落分组”

    超长无空格内容（如 JSON、Base64、URL）必须加 `word-break: break-all;` 或 `overflow-wrap: break-word;`，否则横向撑破容器

    最易被忽略的一点：所有这些排版控制，都建立在 `

    ` 标签被正确、稳定、不嵌套地使用之上。结构歪了，再细的 CSS 也扶不正阅读节奏。