CSS3属性text-overflow(省略符)实战开发详解

先看一下效果：

好了，看完了效果，现在正式开始今天的开发旅程吧！

首先我们先创建html页面，代码如下所示（红色文字即是我们Demo的主要内容）：

页面创建完后，我们先运行一下，查看一下效果:

根据上面的图片，我们第一步要做的就是清除各元素的默认样式。让我们一起动手来编写我们的外部样式文件表：

运行html页面，查看此时运行效果图：

接下来我们就给列表加上阴影边框，以及阴影效果，同时也给title加上背景颜色，代码如下所示(红色字体部分):

运行一下html页面，查看修改完之后的效果，现在我们的列表边框，列表头的样式都已经好了：

最后，让我们运用text-overflow来设置省略符样式吧。在样式表中加入如下代码：

在li里我们加上了属性 text-overflow:ellipsis。 接着我们运行一下页面，查看此时的效果：

不对啊，我们已经加了text-overflow:ellipsis属性了，怎么还没有省略符号呢。 其实顾名思义，这个属性代表的是文本超出限度之后，添加省略符号。但是，我们看运行的效果，页面文字自动换行了。

现在我们不让它换行，加上white-space:nowrap。代码如下所示：

我们再运行看一下页面效果:

我们看到上面的例子，现在已经不换行了，但是内容却超出范围依然显示，好，那我们就让它超出范围的就不显示(text-overflow:hidden;)。修改代码如下：

我们现在再运行一下html页面，看看修改后的效果：

看到上面，心情非常激动，终于得到想要的效果了。

从这几步，我们也大概可以看出，其实text-overflow省略符属性，只是告诉浏览器：如果文本没换行，溢出范围了，如果你隐藏溢出的内容，那我就给你显示省略符。

至此大功告成，哈哈， text-overflow，white-space，overflow 这三个属性，更像一个铁三角啊

CSS3属性text-overflow(省略符)实战开发详解