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

2023/03/06 · admin

首先我们先创建 html页面，代码如下所示（红色文字即是我们Demo的主要内容）： <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <link rel=”stylesheet” href=”styles.css”> <title>text-overflow 实例详解</title> </head> <body> <div> <div class="sidebar"> <dl> <dt>今日头条</dt> <dd> <ul> <li><a href=”http://www.itdriver.cn”>迅雷浴血IPO员工心寒：空降高管摘桃</a></li> <li><a href=”http://www.itdriver.cn”>小米4前面板谍照曝光采用超窄边框设计</a></li> <li><a href=”http://www.itdriver.cn”>在线旅游市场风云变携程将入股艺龙？</a></li> <li><a href=”http://www.itdriver.cn”>人网副总裁杜悦离职炮轰陈一舟为人负面</a></li> </ul> </dd> </dl> </div> </div> </body> </html> 页面创建完后，我们先运行一下根据上面的图片，我们第一步要做的就是清除各元素的默认样式。让我们一起动手来编写我们的外部样式文件表： *{ /*这是一个通配符，匹配页面中所有元素，清除页面所有元素的默认外边距，默认内边距*/ 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页面，查看此时运行效果图： clipboard03 接下来我们就给列表加上阴影边框，以及阴影效果，同时也给title加上背景颜色，代码如下所示(红色字体部分): *{ /*这是一个通配符，匹配页面中所有元素，清除页面所有元素的默认外边距，默认内边距*/ 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; } .sidebar dl{ /*设置列表的边框，并设置列表的圆角，以及阴影效果*/ border: 1px solid #80C8FE; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; box-shadow:6px 6px 6px #666; } .sidebar dt{/* 设置title样式 */ height:2em; /*设置title高度以及行高，使文字垂直居中 */ line-height:2em; padding-left:4px; /*设置title行的背景颜色*/ color:#FFF; /*设置文字颜色*/ font-weight:bold; /*调整文字加粗显示*/ -webkit-border-top-left-radius:8px; /*设置title行的左上和右上圆角效果*/ -moz-border-top-left-radius:8px; border-top-left-radius:8px; -webkit-border-top-right-radius:8px; -moz-border-top-right-radius:8px; border-top-right-radius:8px; } 运行一下html页面，查看修改完之后的效果，现在我们的列表边框，列表头的样式都已经好了： clipboard04 最后，让我们运用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。接着我们运行一下页面，查看此时的效果： clipboard05 不对啊，我们已经加了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; } 我们再运行看一下页面效果: clipboard06 我们看到上面的例子，现在已经不换行了，但是内容却超出范围依然显示，好，那我们就让它超出范围的就不显示(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; }

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

相关文章

最新评论

最近发表

网站分类

文章归档