文本树形

1. 文本效果

text-decoration
- 取值:
- none 默认啥都没
- underline 下划线
- overline 上划线
- line-through 中划线
- blink 文本闪烁
text-transform
- 取值:
- none 默认啥都没
- capitalize 每个单词大写字母开头
- uppercase 全大写
- lowercase 全小写

2. 文本布局

text-indent
- 取值:
- 2em 首行缩进
- -9999px 隐藏内容，但又想被搜索引擎搜到
text-align
- 定义在父元素，指定子元素的文本或图片对齐方式
- 注意
  - 对 block 元素无效(比如 div 就无效)
  - 所以要先转化成 inline-block 元素
- 取值:
- left 默认左对齐
- right 右对齐
- center 水平居中
  - 另一种居中办法
```
#子元素 {
  margin: 0 auto;
}
```
vertical-align
- 定义基准，作为“旁边 inline 元素或文字”与“定义该值的元素”的对齐基准
  - 对于 inline 和 inline-block
    - 是指要“旁边的元素怎么配合自己”
  - 对于 table-cell
    - 是指“自己内部子元素怎么配合自己”
    - 一般对 td 定义此属性
  - 注意对 block 元素无效(比如 div 就无效)
    - 要转换为 inline-block(或 table-cell)
- 取值:
- top 顶部为基准
- middle 中线为基准
- baseline 基线为基准
- bottom 底部为基准
- 负值
  - 基线为基准，并相对基线向上偏移“所取值”
- 百分比
  - 基线为基准，并以 line-height 值换算出 px，作为相对基线向下偏移“所取值”
line-height
- 俗称行高，更准确叫“两行文字基线之间的距离”
- 两个概念
  - 什么叫基线？
    - 先理解一行文字里从上到下的四条线
      - 顶线: top
      - 中线: middle
      - 基线: base
      - 底线: bottom
    - 作用: 可通过 vertical-align 设定对齐基准线
  - 什么叫行距？
    - 上一行底线和下一行顶线之间的距离
- 对比 height
  - height 是一个 p 标签内多行文字总高度
  - line-height 是单行文字占的高度
- 可实现单行文字垂直居中(两个值相等即可)
```
#div {
  height: 60px;
  line-height: 60px;
}
```
- 取值:
- px 最好只用这个，下面两个复杂
- 百分比
  - 会基于当前元素 font-size 换算出 px
  - 当子元素无定义时
    - 会直接继承父元素的 px 值，而不是百分比
- 无单位数字
  - 作为倍数，基于当前元素 font-size 换算出 px
  - 当子元素无定义时
    - 会直接继承父元素的倍数，而不是 px 值
letter-spacing/word-spacing
- 字母之间的间隙/单词之间的间隙
- 取值:
- px

3. 文本换行

有三种: white-space/word-break/word-wrap

white-space

控制空白字符显示 + 自动换行

normal(默认值)
- html 代码里面
  - 宽度不够时自动换行
  - 多个空格压缩成一个
  - 换行符被清理
nowrap
- 永不自动换行
- 只有</br>才能换行
pre
- preserve保留的缩写
- html 代码里面多个空格和换行符全部保留
- 并且不自动换行
pre-wrap
- 在 pre 的基础上，自动换行
pre-line
- 在 pre-wrap 的基础上，空格不保留(压缩成一个)

word-break

控制单词如何被拆分换行

normal(默认值)
keep-all
- 所有“单词”一律不拆分换行
  - 这里的单词包括连续的中文字
- 也可理解为: 只有空格可以触发自动换行
break-all
- 只要碰到边界，一律拆分换行
  - 不管是超长单词，还是超短单词，都会
- 效果并不好，慎重使用

这么看来，这个属性没啥用啊，要是我只想拆分超长单词？

那就要用到下面补充的 word-wrap

word-wrap

历史渊源
- 原本是微软的私有属性
- 现在被 CSS3 规范命名为 overflow-wrap
- 当然也可继续用这个别名
normal(默认值)
break-word
- 只有一个单词整行放不下，才会拆分

总结

最常用的还是下面这两条

white-space: nowrap;

word-wrap: break-word;

Keyboard shortcuts