前言
前段时间开发的时候有要起表格内文字的特定换行要求,使用了一些css属性来实现换行。借此机会,对css的文本相关属性做一个总结
文本属性
letter-spacing
用于设置文本字符的间距表现,值可以是normal或具体的长度值,过大或过小的负值都会使文本不可读
direction
用于控制设置块级元素文本的基本方向,值是ltr或rtl
text-align
定义行内内容相对块父元素的对其方式。值可以是left|right|center|justify|justify-all|start|end
text-indent
块元素首行文本内容之前的缩进量。值可以为负
text-transform
定义文本的大小方式,值可以为none | capitalize | uppercase | lowercase | full-width | full-size-kana
vertical-align
用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。
它的值可以分为3类,相对父元素的值baseline | sub | super | text-top | text-bottom | middle |<percentage> | <length>
相对行的值 top | bottom
表格单元格的值baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
middle是使元素的中部与父元素的基线加上父元素x-height(译注:x高度)的一半对齐。
white-space
用来设置如何处理元素中的空白。
- normal: 连续的空白符会被合并,换行符会被当作空白符来处理。
- nowrap: 连续的空白符会被合并,但文本内的换行无效。
- pre: 连续的空白符会被保留。在遇到换行符或者
元素时才会换行。 - pre-line: 连续的空白符会被合并。在遇到换行符或者
元素,或者需要为了填充「行框盒子(line boxes)」时会换行。
| 换行符 | 空格和制表符 | 文本换行 | 行尾空格 | |
|---|---|---|---|---|
| normal | 合并 | 合并 | 换行 | 删除 |
| nowrap | 合并 | 合并 | 不换行 | 删除 |
| pre | 保留 | 保留 | 不换行 | 保留 |
| pre-wrap | 保留 | 保留 | 换行 | 挂起 |
| pre-line | 保留 | 合并 | 换行 | 删除 |
| break-spaces | 保留 | 保留 | 换行 | 换行 |
word-spacing
标签和文本的间距,值为normal|<length>|<percentage>
word-break
单词内断行规则,值为normal | break-all | keep-all | break-word
overflow-wrap
用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。值为normal | break-word | anywhere
text-overflow
用来确定如何向用户发出未显示的溢出内容信号。它可以被剪切,显示一个省略号('...',U + 2026 HORIZONTAL ELLIPSIS)或显示一个自定义字符串。值为[ clip | ellipsis | <string> ]{1,2}