css font 文字及 text 段落样式 word-break断词 white-space空白符 font-face 换行 溢出省略

对齐方式

• text-align 文本水平对齐方式

• vertical-align 属性设置行内元素的垂直对齐基准线

• line-height 行高
  行高等于height时可垂直居中，不设置height时，默认撑开。
  不建议使用单位值赋值line-height 实际效果可能不符合预期

排版

• letter-spacing 字符的间距 可为负值 不可取百分比

• text-indent 文本缩进 可为负值
  column-xxxx column系列文本分栏/多列

• line-height 行高 可用于调整行间距

文字排列方向

writing-mode
horizontal-tb | vertical-rl | vertical-lr

direction
rtl | ltr
用于设置文本、表格列和水平溢出的方向。

字体样式

• font-family 字体
    @font-face 下载字体修饰符

@font-face {
  font-family: 'DOUYU';
  src: url('@/assets/font/DOUYU.ttf') format('truetype');
}

• font-size 字体大小

• font-weight
    normal：400，bold：700 ；1~1000

• text-decoration 修饰线条 如下划线、中划线、上划线

• color 字体颜色

• backgroud 背景

font-style 字体样式
Italic 字体一般是现实生活中的草书，相比无样式的字体，通常会占用较少的水平空间
oblique 字体一般只是常规字形的倾斜版本。
如果当前字体没有对应的斜体，那么斜体（italic）和倾斜体（oblique）都会通过人工倾斜常规字体的字形来模拟.font-synthesis 对此进行控制

文本阴影

• text-shadow 等同于box-shadow

空白符的处理规则

• white-space
  空白符自然包括换行符，这很好理解~

关键字	换行符 处理方式	空格、制表符 处理方式	文本是否换行	行尾空格 处理方式
normal	合并	合并	换行	删除
nowrap	合并	合并	不换行	删除
pre	保留	保留	不换行	保留
pre-wrap	保留	保留	换行	挂起
pre-line	保留	合并	换行	删除
break-spaces	保留	保留	换行	换行

溢出内容处理

• text-overflow

1. 在块级元素溢出的内容有效
2. 与 inline 方向一致的溢出

[ clip | ellipsis | `<string>` ]{1,2} // 取两个值时为前后溢
// string 大部分浏览器不支持

• clip 直接截断
• ellipsis 截断并显示 ...

多行文本溢出问题 -webkit-line-clamp

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

• overflow-wrap 溢出父级换行
  换行逻辑 主要针对英文单词的处理
  normal 单词空隙换行 | break-word 折断单词换行
  word-break 属于微软私有
  normal cjk断单词不断 | break-all | keep-all
  CJK（中日韩文）断不断，其他单词断不断的问题

• text-transform 字体大小写转换