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

时间：2014-08-05 03:03:08 阅读：296 评论：0 收藏：0 [点我收藏+]

标签：style http color java strong io 文件 2014

有人会问，为什么我把text-overflow拿出来单独讲解。以前，当一行内容显示不完整的时候，想要显示省略符，需要通过javascript等手段。

但是CSS3引入了text-overflow省略符属性，只需要短短一行代码就可以实现，开发方式的简洁强大不言而喻。

这篇文章，我讲带领大家做一个《今日头条》新闻导航列表，带领大家领略text-overfow的强大魅力。先看一下效果：

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

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

<!DOCTYPE html>

<html>

<head>

<title>text-overflow 实例详解</title>

</head>

<body>

<div>

<div class="sidebar">

<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>

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

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

*{ /*这是一个通配符，匹配页面中所有元素，清除页面所有元素的默认外边距，默认内边距*/

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加上背景颜色，代码如下所示(红色字体部分):

*{ /*这是一个通配符，匹配页面中所有元素，清除页面所有元素的默认外边距，默认内边距*/

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页面，查看修改完之后的效果，现在我们的列表边框，列表头的样式都已经好了：

最后，让我们运用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 这三个属性，更像一个铁三角啊。

欢迎大家加入互联网技术交流QQ群：62329335

个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。

CSS3新增属性text-overflow(省略符)实战开发详解,布布扣,bubuko.com

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

标签：style http color java strong io 文件 2014

原文地址：http://www.cnblogs.com/itdriver/p/3891377.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行