CSS3文本效果


CSS3 文本

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

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

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

浏览器支持

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

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

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

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文本属性:

属性 描述
text-align-last 指定如何对齐文本的最后一行。
text-justify 指定对齐的文本如何对齐和间隔。
text-overflow 指定超出的内容将不显示
word-break 指定行中断规则
word-wrap 允许长单词能够被拆分并换行到下一行