CSS3属性text-overflow(省略符)实战开发详解
先看一下效果:
好了,看完了效果,现在正式开始今天的开发旅程吧!
首先我们先创建html页面,代码如下所示(红色文字即是我们Demo的主要内容):
页面创建完后,我们先运行一下,查看一下效果:
根据上面的图片,我们第一步要做的就是清除各元素的默认样式。让我们一起动手来编写我们的外部样式文件表:
*{ /*这是一个通配符,匹配页面中所有元素,清除页面所有元素的默认外边距,默认内边距*/
padding:0px;
margin:0px;
color:#000;
}
a:link{ /*设置超链接未访问时样式*/
text-decoration:none;
}
a:hover{ /*鼠标滑过超链接时显示的样式*/
color:#F30;
text-decoration:underline;
}
.sidebar{ /*将边栏设置成固定宽度*/
margin:10px auto;
width:200px;
}
.sidebar ul{ /*清除ul默认样式*/
list-style-type:none;
}
|
运行html页面,查看此时运行效果图:
接下来我们就给列表加上阴影边框,以及阴影效果,同时也给title加上背景颜色,代码如下所示(红色字体部分):
运行一下html页面,查看修改完之后的效果,现在我们的列表边框,列表头的样式都已经好了:
最后,让我们运用text-overflow来设置省略符样式吧。在样式表中加入如下代码:
.sidebar dd{ /*设置dd 与 dt 之间的间距,并将字体设置为外框大小的0.8倍*/
margin:10px auto;
font-size:0.8em;
}
.sidebar dd li{ /*设置新闻列表间距离,并设置不换行,且显示省略符 */
margin-top:4px;
padding: 2px 4px;
text-overflow:ellipsis;
}
|
在li里我们加上了属性 text-overflow:ellipsis。 接着我们运行一下页面,查看此时的效果:
不对啊,我们已经加了text-overflow:ellipsis属性了,怎么还没有省略符号呢。 其实顾名思义,这个属性代表的是文本超出限度之后,添加省略符号。但是,我们看运行的效果,页面文字自动换行了。
现在我们不让它换行,加上white-space:nowrap。代码如下所示:
.sidebar dd{ /*设置dd 与 dt 之间的间距,并将字体设置为外框大小的0.8倍*/
margin:10px auto;
font-size:0.8em;
}
.sidebar dd li{ /*设置新闻列表间距离,并设置不换行,且显示省略符 */
margin-top:4px;
padding: 2px 4px;
text-overflow:ellipsis;
white-space:nowrap;
}
|
我们再运行看一下页面效果:
我们看到上面的例子,现在已经不换行了,但是内容却超出范围依然显示,好,那我们就让它超出范围的就不显示(text-overflow:hidden;)。修改代码如下:
.sidebar dd{ /*设置dd 与 dt 之间的间距,并将字体设置为外框大小的0.8倍*/
margin:10px auto;
font-size:0.8em;
}
.sidebar dd li{ /*设置新闻列表间距离,并设置不换行,且显示省略符 */
margin-top:4px;
padding: 2px 4px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
|
我们现在再运行一下html页面,看看修改后的效果:
看到上面,心情非常激动,终于得到想要的效果了。
从这几步,我们也大概可以看出,其实text-overflow省略符属性,只是告诉浏览器:如果文本没换行,溢出范围了,如果你隐藏溢出的内容,那我就给你显示省略符。
至此大功告成,哈哈, text-overflow,white-space,overflow 这三个属性,更像一个铁三角啊