4.3 排版与文本工具类

4.3 排版与文本工具类

排版族把字号（fs-*）、字重（fw-*）、斜体（fst-*）、行高（lh-*）、对齐（text-start/center/end）、装饰（text-decoration-*）与文本溢出处理全部类名化。文本溢出三判——单行截断（text-truncate）、按词换行（text-wrap）、任意折行（text-break）——是内容页排版的收官判决。

位置：工具类四案第三案。4.1 管空间、4.2 管颜色，本节管「字」本身：它决定内容页 80% 的阅读质感，也是断点前缀用得最少的一族——字号对齐多数全区间统一判。

字号与标题：两套刻度的分工

<!-- fs- 刻度：1 到 6 与 h1 到 h6 尺寸对应，另有 sm 与基点值 -->
<p class="fs-1">一级字号 2.5rem，不自带行高与外距</p>
<p class="fs-3">三级字号 1.75rem</p>
<p class="fs-6">正文基础字号 1rem</p>
<p class="fs-5">五级字号，比正文大半档，适合小节引导</p>
<p class="small">small：直接缩到 0.875em 并变浅，继承父级字号更聪明</p>

<!-- 真标题 vs 样式标题：语义与皮肤分离 -->
<h3 class="h5">语义三级标题，皮肤五级大小：文档大纲正确，视觉层级压缩</h3>
<span class="h2 d-block">非标题元素穿上二级标题的皮肤：视觉是标题，大纲里不是</span>
<p class="lead">lead：引导段落，字号 1.25rem、字重偏轻，专给每页第一段</p>
​

裁决口径：h1 到 h6 是语义（文档大纲、读屏导航），fs-* 与 .h* 是皮肤。要「大纲正确、视觉压缩」用真标签配皮肤类；要「视觉是标题、语义不是」用 span 配 h* 类。两套刻度不要混着记：fs 管字号一件事，h 管字号加行高加外距一整套。

字重、斜体与行高的三连判

<p class="fw-bold">加粗 700：强调词、数据值</p>
<p class="fw-bolder">更粗：比父级再粗一档</p>
<p class="fw-semibold">半粗 600：卡片标题的性价比之选</p>
<p class="fw-normal">常规 400：把继承来的粗体拉回</p>
<p class="fw-light">细体 300：大字标语、装饰性文字</p>
<p class="fst-italic">斜体：外文书名、变量名惯例</p>

<!-- 行高：lh-1 极紧、lh-sm 紧、lh-base 基准、lh-lg 宽松 -->
<p class="fs-1 lh-1">大字号配紧行高：海报式标题</p>
<p class="lh-lg">正文配宽松行高：长文阅读舒适度直接来自这一判</p>
<!-- 组合套路：标题 lh-1 + 正文 lh-lg，是落地页文字排版的黄金组合 -->
​

字重裁决的实用主义：正文内的强调用 fw-semibold 而不是 fw-bold——700 在中文小字号下发糊，600 更清爽；fw-bold 留给独立标题。行高与字号要成对判：字号越大行高系数该越小（lh-1），字号小行高放大（lh-lg），一套组合拳拉开页面层级。

对齐与装饰：可挂断点的方向类

<!-- 对齐：断点前缀在此族最常用 —— 手机居中、桌面居左的标题流 -->
<h4 class="text-center text-md-start">栅格体检报告</h4>
<p class="text-center text-md-start">副题：768px 起左对齐，与正文合流</p>

<!-- 装饰与状态 -->
<a href="#" class="text-decoration-none">去掉下划线的链接</a>
<a href="#" class="text-decoration-underline">显式加下划线（比依赖默认态更稳）</a>
<span class="text-decoration-line-through">原价 199</span>

<!-- 大小写转换（英文内容）与等宽字体 -->
<p class="text-lowercase">BOOTSTRAP 全小写化</p>
<p class="text-uppercase">bootstrap 全大写化</p>
<p class="text-monospace font-monospace">等宽：A1B2C3、代码片段、编号</p>
​

text-center text-md-start 是营销页最常见判决：窄屏居中显得庄整，宽屏左对齐配合左起正文。方向类天生逻辑化（start/end 随文向镜像），与 4.1 的 s/e 间距同宗。

溢出三判：长文本的三种下场

<!-- 判一：单行截断 —— 卡片标题、表格单元格的保命判决 -->
<div class="col-md-4">
  <div class="card"><div class="card-body">
    <p class="card-title text-truncate">
      这个标题长得离谱但在卡片里只能占一行超出部分省略号收场
    </p>
  </div></div>
</div>
<!-- 效果：超宽部分被裁掉，尾部出省略号；容器必须有确定宽度（栅格列天然满足） -->

<!-- 判二：按词换行 —— 默认行为的反悔键 -->
<span class="text-nowrap d-inline-block">不让断词：状态徽章、按钮内文字</span>
<p class="text-wrap" style="max-width: 12rem">按空格断词换行，中文本来就逐字断，这判主要救英文</p>

<!-- 判三：任意折行 —— 长串无空格内容 -->
<p class="text-break">sha256 校验值 9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08</p>
<!-- 效果：在任意字符处硬折行，哈希、链接、编号不撑破正文列 -->
​

三判的决策树一句话：有固定容器宽、内容不许换行，判截断；内容允许换行但按词换，判 wrap（默认）；内容是无空格长串，判 break。3.3 节已预演过 break，本节把它并进决策树——内容页排版的最后一块拼图归位。

⚠️ 常见坑：text-truncate 需要 display: block 或 inline-block 且有确定宽度。放在 display: flex 的裸子项上常见失效——外面包一层或给足宽度，判决才生效。

案例：价格卡片的三处排版改判

背景：会员价格卡三张并排，反馈是「数字不够醒目、套餐名太挤、小字条款糊成一团」。

操作：套餐名 fs-6 fw-semibold lh-lg 让位；价格 fs-1 fw-bold lh-1 立主角，货币符号拆成 fs-4 align-top 缩小上提；条款区 small text-body-secondary lh-lg text-break 收尾。

结果：价格成为第一视觉焦点，套餐名退居引导，条款可读不抢戏——同一张卡没有改布局，只动了排版判决。

解读：视觉层级本质是字号字重行高的组合差，改判成本极低。主角判法（大号加粗紧行高）与配角判法（小号常规宽行高）的对比拉得越开，层级越清楚。

变式：若三档价格要突出中间档，给中间卡的价格加 text-primary、其余 text-body——排版判不动，借 4.2 的颜色族完成强调，两族协作零冲突。

结案要点

• 语义标题（h1 到 h6）与皮肤字号（fs-、.h）分工：大纲归标签，视觉归类名；
• 字重实用主义：正文强调用 semibold，标题才用 bold；行高与字号成对判；
• 对齐族可挂断点，text-center text-md-start 是营销页高频判决；
• 溢出三判决策树：定宽不换行判 truncate、按词换判 wrap、长串判 break；
• 排版改判成本极低，调层级先动字号字重行高，别急着动布局。

最后一案把散装的盒子类全部归拢到速查台。