CSS3文本效果

CSS3 文本

CSS3 包含了几种新的文本特性.

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

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

浏览器支持

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

数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。

CSS3 文本溢出

CSS3 text-overflow 属性指定怎样显示溢出的内容.

它可以被剪切:

这是一些长的文字，将不适合在盒子里

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

这是一些长的文字，将不适合在盒子里

CSS代码如下所示:

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;
}

让我试试

下面的示例演示如何在元素上显示溢出的内容：

div.test:hover {
    text-overflow: inherit;
    overflow: visible;
}

让我试试

CSS3 自动换行

CSS3 word-wrap 属性允许长单词能够被拆分并换行到下一行。

如果一个单词太长，不能适应某个区域，它就会向外扩展。:

这段话有很长的一个单词: thisisaveryveryveryveryveryverylongword. 长单词会换行.

word-wrap 属性允许强制文本换行。 - 即使在一个词的中间分割它:

这段话有很长的一个单词: thisisaveryveryveryveryveryverylongword. 长单词会换行到下一行.

CSS代码如下所示:

p {
    word-wrap: break-word;
}

让我试试

CSS3 断字

CSS3 word-break 属性指定换行规则.

这一段包含一些文字。This line will-break-at-hyphens.

这一段包含一些文字。The lines will break at any character.

CSS代码如下所示:

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

p.test2 {
    word-break: break-all;
}

让我试试

CSS3 文本属性

下表列出了新的CSS3文本属性：