W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS3 文本效果


CSS3中包含几个新的文本特征。

在本章中您将了解以下文本属性:

  • text-overflow
  • word-wrap
  • word-break

浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。

后边跟 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。

属性
text-overflow 4.0 12.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 12.0 5.5 3.5 6.1 12.1
word-break 4.0 12.0 5.5 15.0 3.1 15.0

CSS3 Text Overflow属性

CSS3文本溢出属性指定应向用户如何显示溢出内容

它可以省略:

This is some long text that will not fit in the box

或者它可以呈现为一个省略号(…):

This is some long text that will not fit in the box

Example

p.test1 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip;
}

p.test2 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis;
}
尝试一下 >>

下面的实例演示如何显示溢出的内容当划至元素时:

Example

div.test:hover {
    text-overflow: inherit;
    overflow: visible;
}
尝试一下 »

CSS3的换行

如果某个单词太长,不适合在一个区域内,它扩展到外面:

CSS3中,自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字:

如果一个单词太长,以适应在一个区域,外面扩展:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

自动换行属性允许您将迫使文本包装——即使这意味着分裂的一个词:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

The CSS code is as follows:

CSS代码如下:

Example

p {
    word-wrap: break-word;
}
尝试一下 >>

CSS3 单词拆分换行

CSS3 单词拆分换行属性指定换行规则:

This paragraph contains some text. This line will-break-at-hyphens.

This paragraph contains some text. The lines will break at any character.

CSS代码如下:

Example

p.test1 {
    word-break: keep-all;
}

p.test2 {
    word-break: break-all;
}
尝试一下 >>

新文本属性

属性 描述
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。
text-overflow 规定当文本溢出包含元素时发生的事情。
word-break 规定非中日韩文本的换行规则。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。