CSS3 文本

发表于: 2015-06-25分类于:CSS

font

  • font-family: 字体族
  • font-style:字体样式
    • normal:正常
    • italic:斜体
    • oblique:倾斜
  • font-weight:字体粗细
    • 100 ~ 900
    • bold, light …
  • font-size:字体大小
  • font-variant:字体变化,可以改变为大写或者小写

如果需要简写,需要按照一些次序:

font:font-style|font-variant|font-weight|font-size/line-height | font-family

text-shadow

用于设置文本阴影效果,基本语法如下:

text-shadow:x-offset|y-offset|blur|color, x-offset|y-offset|blur|color, ...

text-overflow

用来处理文本过长时候的溢出效果。有两个可选值:

  • clip:不显示省略标记,只是简单的裁剪
  • ellipsis:文本溢出的时候插入溢出标记(…)

要想让该属性生效,需要保证文本在一行显示(write-space:nowrap),还需要让溢出内容隐藏(overflow:hidden),并且需要定义容器的宽度,这三个条件缺一不可。

word-wrap

默认情况下,对于西方文字,浏览器会在半角空格或者连字符的地方执行自动换行。对于中文,可以在任何一个文字后面进行换行,碰到标点的时候,通常将标点和前一个文字作为一个整体来进行换行。

英文单词、url 、数字都不会在中间换行,这导致排版常常被破坏。为了让他们也能换行,需要使用 word-wrap 属性。该属性的用法如下:

word-wrap: normal | break-word

break-word

break-word 属性可以用来设置文字截断的方法,可选的值为:

  • break-all:可以强行截断英文单词,达到词内换行的效果
  • break-word:从单词后断开

white-space

white-space 属性主要用来声明建立布局过程中如何处理空白符号。有五个可选取值:

  • normal:多个空白符会被合并为一个,遇到换行符不会换行,只会在容器宽度不够时进行换行
  • pre:表现会和 pre 标签一样,保留连续空白,遇到换行符会进行换行,文本不会因为容器宽度不够而折行
  • nowrap:合并连续空格,不允许折行
  • pre-wrap:保留连续空格,允许折行
  • pre-line:合并连续空白,但是保留换行符