前端Wiki/CSS/基础/文字与颜色

文本属性

文本排版常用的属性有：

text-align：水平对齐，left / center / right，对块级元素内的行内内容生效。
text-decoration：装饰线。最常见的是 none 去掉链接下划线，也可以设 underline、line-through。
text-indent：首行缩进，中文排版常用 2em 缩进两个字。
letter-spacing / word-spacing：字符间距 / 单词间距，标题排版常给 letter-spacing 加 1~2px 提升精致感。
white-space：控制空白与换行，nowrap 强制不换行，配合 overflow 可做单行截断。
text-overflow: ellipsis：溢出显示省略号，必须与 nowrap、overflow:hidden 三件套配合。

单行截断三件套是面试和实战的高频考点：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，顺序不可少。

本节要点对齐 text-align、去下划线 text-decoration:none、首行缩进 2em；单行省略号需要 nowrap + overflow:hidden + ellipsis 三件套。

CSS

<style>
  a { text-decoration: none; color: #06c; }
  a:hover { text-decoration: underline; }
  p.text {
    text-indent: 2em;      /* 首行缩进两字 */
    text-align: justify;   /* 两端对齐 */
  }
  .title {
    letter-spacing: 2px;
  }
  .clip {
    width: 200px;
    white-space: nowrap;      /* 不换行 */
    overflow: hidden;         /* 裁掉溢出 */
    text-overflow: ellipsis;  /* 打上省略号 */
  }
</style>
<p class="title">标题字距</p>
<p class="text">这是一段首行缩进的正文内容。</p>
<p class="clip">这一行太长了会被截断显示省略号哦</p>

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读