text-align等CSS属性是控制HTML文字排版的核心，标签仅负责语义；浏览器默认样式影响显示效果，废弃的align属性会触发quirks模式；text-align作用于内联内容，line-height推荐无单位值，letter-spacing宜用em单位，竖排必须用writing-mode: vertical-rl。
text-align、line-height、letter-spacing 和 writing-mode 是控制 HTML 文字排版最核心的 CSS 属性，HTML 标签本身（如 p、h1）只负责语义，不负责样式效果。
为什么直接写 <p> 和 <h2> 看不出排版效果
浏览器对这些标签有默认样式：比如 p 自带上下外边距，h1 字体大但行高松散、字距生硬。不显式覆盖，就等于没控制排版。更关键的是：align 属性（如 <p align="center">）已废弃多年，用它会触发 quirks 模式，导致 CSS 解析异常、响应式失效。
text-align 控制水平对齐时的常见误区
它只作用于块级容器内的**内联内容**（文字、图片等），不是让整个 div 居中——那是 margin: auto 或 flex 的事。
- 中文段落常用
text-align: justify实现两端对齐，但注意：英文单词间会被强制拉伸，需配合hyphens: auto或限制宽度避免断词难看 -
text-align: center在横排下是水平居中；但在writing-mode: vertical-rl下，它变成**垂直居中**（即沿列方向居中），容易误判 - 不要在
body上全局设text-align: center，否则所有内联元素（按钮、链接、图标）都会被强行居中，破坏布局逻辑
line-height 和 letter-spacing 怎么配才自然
这两个值不是越大越好看，而是要匹配字体大小和语言习惯。中文正文常见组合是：font-size: 16px + line-height: 1.75 + letter-spacing: 0.05em。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
line-height推荐用无单位数值（如1.6），避免固定像素值（如24px）在缩放或动态字号下断裂 -
letter-spacing用em单位比px更稳——0.03em在14px下约0.42px，在20px下约0.6px，比例一致 - 中英文混排时，西文对
letter-spacing更敏感，可加text-rendering: optimizeLegibility微调渲染 - 标题可适当加大字距（
0.1em～0.15em），但正文超过0.08em就容易降低可读性
竖排文字必须用 writing-mode: vertical-rl
别再用 transform: rotate(90deg) 或手动换行模拟竖排——那样文本不可选、无法复制、SEO 失效，响应式一塌糊涂。
- 中文竖排必须配
text-orientation: upright，否则英文字母会横向堆叠成一条线（比如 “HTML” 变成 H↵T↵M↵L） - 容器必须设固定
height，否则竖排内容会让父容器无限拉长；建议搭配overflow: hidden或text-overflow: ellipsis控制截断 -
writing-mode: vertical-rl是唯一语义正确、无障碍友好、支持搜索索引的方案，现代浏览器（Chrome 48+、Firefox 41+、Safari 10.1+）均已原生支持
真正难的不是写对某一行样式，而是在不同字号、不同语言、不同阅读场景下保持间距与节奏的一致性——比如移动端小字号下 0.05em 字距可能过紧，而古籍展示中又要保留传统铅字的呼吸感。这些细节没法靠一套通用值解决，得结合真实内容反复调试。
