CSS Fonts
- font
- font-family
- font-size
- font-style
- font-weight
- 字体并不一定按规范设计，因此在 css 使用这些字体时会存在 fallback 机制
- unicode-range
- 可指定使用特殊字体的字符范围
- font-variant
- font-size-adjust
- font-stretch
- font-kerning
- font-feature-settings
- About
CSS Inline
- vertical-align
- dominant-baseline
- 对齐框内内容的默认基线
- The child box is aligned to its parent by matching up their alphabetic baselines.
- 如果行内框根本不包含内容，则会认为它包含一个“支柱”（一个不可见的零宽度字形）框，用于做基线对齐
- demo:
内容在 height: 40px 的盒子里垂直居中
- demo:
- baseline-source.
- demo:
- inline-block 使用 last 对齐：test line1
line2 - inline-flex 使用 first 对齐：test line1
line2
- inline-block 使用 last 对齐：test
- 一个 inline-block 元素，如果里面没有 inline 内联元素，或者 overflow 不是 visible，则该元素的基线就是其 margin 底边缘。demo:
test
- demo:
- alignment-baseline
- alignment-shift
- dominant-baseline
- text-edge
- leading-trim
- line-height
- inline 元素高度由 height 决定；没有定义 height , 由 line-height/text-edge/leading-trim/inline-sizing 决定
- 如果 line-height 指定的大小小于框的大小，背景和边框会“渗入”相邻的行框，可能会遮盖前面的内容
- demo:
如果 line-height 指定的大小小于框的大小，背景和边框会“渗入”相邻的行框，可能会遮盖前面的内容
- demo:
- Why is the span’s line-height useless?
- line-height-step
- 让内容占据的行高是 line-height-step 属性值的整数倍
- initial-letter
CSS Text
- white-space
- white-space: normal/nowrap/pre/pre-wrap/pre-line
- 去掉空白
- white-space-collapsing: discard
- How to remove the space between inline/inline-block elements?
- 父级标签设置 font-size: 0; 子级标签再还原字体大小
- letter-spacing
- word-spacing
- tab-size
- text-align
- text-align-last
- text-indent
- text-justify
- inter-word
- inter-character
- text-size-adjust
- hyphenate-limit-chars
- hanging-punctuation
- hyphens
- overflow-wrap
- line-break
- word-break
- word-break: normal/break-all/keep-all
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text
- text-wrap
- text-overflow
- text-transform
- About
CSS Text Decoration
- text-decoration
- text-decoration-line
- overline/underline/line-through
- 支持同时设置两个值
- text-underline-offset
- text-underline-position
- overline/underline/line-through
- text-decoration-color
- text-decoration-style
- solid/double/dotted/dashed/wavy
- text-decoration-thickness
- text-decoration-skip
- text-decoration-skip-ink
- text-decoration-line
- text-emphasis
- text-shadow
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- About
CSS Writing Modes
- writing-mode
- text-orientation
- text-combine-upright
- direction
- ltr/rtl
- unicode-bidi
- About
CSS Break
- break-after, break-before and break-inside
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fragmentation
- https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media old: page-break-before, page-break-after and page-break-inside
- About
CSS Content
- content 伪类
- ‘\A’
- quotes
- About
entity-names
- 实体
- ← ↑ → ↓
- (1:1 空格) (1:2 空格) (Space) (全角空格)
- √(对勾) ×(乘号) ×
- ”(”) ‘(‘) ’(’)
- ‹ (‹) ›(›) «(«) »(»)
- ℃(℃) ℉(℉)
- ☜(☜) ☞(☞)
- ™(™)
- ★(★) ☆(☆)
- ¥(日元) €(欧元) £(英镑) $(美元) ¥(人民币)
- © ®
- About
其它
- 多行
- demo:
- code:
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
- 需求：文本内容很少，只占一行时，居中对齐显示; 文本内容超过一行时，居左对齐显示
- 方案 1: display: flex/inline-flex; justify-content: center;
- code:
文本内容很少，只占一行时，居中对齐显示文本内容很少，只占一行时，居中对齐显示; 文本内容超过一行时，居左对齐显示
- code:
- 方案 2: 父容器 text-align: center; 自身节点 display: inline-block; + text-align: left;
- code:
文本内容很少，只占一行时，居中对齐显示文本内容很少，只占一行时，居中对齐显示; 文本内容超过一行时，居左对齐显示
- code:
- 方案 1: display: flex/inline-flex; justify-content: center;
- https://compat.spec.whatwg.org/
- https://www.w3.org/TR/clreq/
- https://www.w3.org/TR/?tag=css
- https://www.w3.org/TR/css-display-3/
