CSS 文本相关属性

238 阅读2分钟

前言

前段时间开发的时候有要起表格内文字的特定换行要求,使用了一些css属性来实现换行。借此机会,对css的文本相关属性做一个总结

文本属性

letter-spacing

用于设置文本字符的间距表现,值可以是normal或具体的长度值,过大或过小的负值都会使文本不可读

direction

用于控制设置块级元素文本的基本方向,值是ltrrtl

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}