[分享]css3文字显示一行

CSS3中有很多新特性，其中之一就是可以让文字只显示一行，这在设计一些独具特色的页面时非常有用。例如，如果我们想让一个标题只显示一行而不换行，可以这样设置： h1 { whitespace: nowr...

CSS3中有很多新特性，其中之一就是可以让文字只显示一行，这在设计一些独具特色的页面时非常有用。

例如，如果我们想让一个标题只显示一行而不换行，可以这样设置：

h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

其中，white-space: nowrap;表示不允许文字换行；overflow: hidden;表示超出部分隐藏；text-overflow: ellipsis;表示当文字被截断时用省略号表示。

这样设置后，当h1元素内容超过一行时，就会被截断并用省略号表示。

需要注意的是，这个效果只在支持CSS3的浏览器上才能实现，老旧的浏览器可能无法显示。

除了标题外，我们还可以将它应用于其它元素上，比如一段描述文字：

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

同样的，将p元素的white-space设为nowrap，就可以实现只显示一行文字的效果了。

总之，CSS3的这个特性让我们在设计页面时更加灵活方便，可以让我们的页面更加美观实用。