讲解

文字属性是 CSS 里最高频的一组。font-size 设字号、font-weight 设粗细（100-900，400 是 normal、700 是 bold）、font-style: italic 设斜体、color 设文字颜色。line-height（行高）是中文排版舒适度的关键：推荐写无单位数字 1.5～1.8，它会作为「倍数」被子元素按各自字号继承，而写 1.5em 或 24px 则是把「计算结果」继承下去，子元素字号一变行高就不合适了。letter-spacing 微调字距（标题常用），text-align 设对齐（left/right/center/justify），text-decoration 管下划线删除线（a { text-decoration: none } 是去掉链接下划线的标准写法），text-indent: 2em 做中文段落首行缩进。

单行省略号是几乎每个项目都要用的三板斧，三个属性缺一不可：white-space: nowrap 禁止换行、overflow: hidden 裁掉超出、text-overflow: ellipsis 显示省略号。多行省略用 -webkit-line-clamp（配合 display: -webkit-box），虽然带前缀但全浏览器可用。

中英文混排还有两个断行属性：word-break: break-all 会在任意字符处断行（中文自然，但英文单词会被生硬切开）；overflow-wrap: break-word（旧名 word-wrap）只在「放不下的长单词/长 URL」处断开，是正文防止长链接撑破容器的正确选择。white-space 属性还控制空白的处理：pre 保留换行和空格、pre-wrap 保留且允许换行（展示用户输入的文本常用）。

示例

.article-body {
  font-size: 16px;
  line-height: 1.8; /* 无单位：按各元素字号等比继承 */
  color: #343a40;
  text-align: justify;
}
.article-body p {
  text-indent: 2em; /* 中文段落首行缩进两字 */
}
.article-body a {
  color: #1971c2;
  text-decoration: none;
}
.article-body a:hover {
  text-decoration: underline;
}

/* 单行省略三板斧 */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 多行省略（两行截断） */
.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 长 URL 不撑破容器 */
.comment {
  overflow-wrap: break-word;
}

常见坑

  • line-height 用 px 或 em 继承翻车：父元素 line-height: 1.5em 算出一个固定像素值传给所有后代，后代字号大了行高不变、文字挤在一起。无单位数字是唯一稳妥写法。
  • 单行省略漏属性：三个属性少一个都不生效，尤其常忘 overflow: hidden；另外它对 display: inline 元素无效，需要 block 或 inline-block。
  • text-align: justify 中文参差：中文两端对齐在西文空格处理上偶尔出现巨大字距，可配合 text-justify: inter-ideograph 或接受左对齐。
  • text-decoration: none 全局去下划线：链接去掉下划线后必须有其他可辨识特征（颜色、悬停态），否则用户找不到链接。
  • word-break: break-all 切英文：英文单词被从中间劈开很难看，防溢出用 overflow-wrap: break-word，只在必要时断词。

小结

字号、字重、行高（无单位）、对齐、装饰线构成基础排版；单行省略三属性连用；断行用 overflow-wrap 处理长词。下一章讲字体本身：字体族与网络字体。