先看一下效果：
 
好了，看完了效果，现在正式开始今天的开发旅程吧！
 
首先我们先创建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 这三个属性，更像一个铁三角啊

CSS3属性text-overflow(省略符)实战开发详解的更多相关文章

  1. iOS应用开发详解

    <iOS应用开发详解> 基本信息 作者: 郭宏志    出版社:电子工业出版社 ISBN:9787121207075 上架时间:2013-6-28 出版日期:2013 年7月 开本:16开 ...

  2. EasyPR--开发详解（6）SVM开发详解

    在前面的几篇文章中,我们介绍了EasyPR中车牌定位模块的相关内容.本文开始分析车牌定位模块后续步骤的车牌判断模块.车牌判断模块是EasyPR中的基于机器学习模型的一个模块,这个模型就是作者前文中从机 ...

  3. 基于H5的微信支付开发详解

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  4. ****基于H5的微信支付开发详解[转]

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  5. 【转发】NPAPI开发详解，Windows版

    NPAPI开发详解,Windows版 9 jiaofeng601, +479 9人支持,来自Meteor.猪爪.hanyuxinting更多 .是非黑白 .Yuan Xulei.hyolin.Andy ...

  6. 嵌入式Linux应用程序开发详解------（创建守护进程）

    嵌入式Linux应用程序开发详解 华清远见 本文只是阅读文摘. 创建一个守护进程的步骤: 1.创建一个子进程,然后退出父进程: 2.在子进程中使用创建新会话---setsid(): 3.改变当前工作目 ...

  7. iOS原生地图开发详解

    在上一篇博客中:http://my.oschina.net/u/2340880/blog/414760.对iOS中的定位服务进行了详细的介绍与参数说明,在开发中,地位服务往往与地图框架结合使用,这篇博 ...

  8. wpf 客户端【JDAgent桌面助手】开发详解（四） popup控件的win8.0的bug

    目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...

  9. opencart 模块开发详解

    opencart 模块开发详解 由 xiekanxiyang » 2013年 7月 11日 10:17 pm opencart 将页面分成若干模块, 每个模块可以有多个实例(可能这样说不是很恰当) 每 ...

随机推荐

  1. JOSM学习下载地址

    JOSM is an extensible editor for ​OpenStreetMap (OSM) written in ​Java 7. Currently it supports load ...

  2. ACM计算几何题目推荐

    //第一期 计算几何题的特点与做题要领: 1.大部分不会很难,少部分题目思路很巧妙 2.做计算几何题目,模板很重要,模板必须高度可靠. 3.要注意代码的组织,因为计算几何的题目很容易上两百行代码,里面 ...

  3. GroundworkCSS ♥ Tables

    微信公众平台开发(41)一键关注微信公众平台账号 - 方倍工作室 - 博客园 微信公众平台开发(41)一键关注微信公众平台账号 GroundworkCSS ♥ Tables Example Layou ...

  4. Quartz框架的使用

    专用词汇:scheduler:任务调度器trigger:触发器,用于定义任务调度时间规则job:任务,即被调度的任务misfire:错过的,指本来应该被执行但实际没有被执行的任务调度 Quartz核心 ...

  5. 1、什么是Lucene，Lucene能干什么

    1.什么是lucene  Lucene是一个全文搜索框架,而不是应用产品.因此它并不像http://www.baidu.com/ 或者google Desktop那么拿来就能用,它只是提供了一种工具让 ...

  6. HDFS的运行原理（转载）

    原文地址:http://www.cnblogs.com/laov/p/3434917.html 简介 HDFS(Hadoop Distributed File System )Hadoop分布式文件系 ...

  7. mode（思维，注意内存）

    mode Time Limit:1000MS     Memory Limit:1024KB     64bit IO Format:%lld & %llu Submit Status Pra ...

  8. 奇妙的算法之LCS妙解

    LCS算法妙解 LCS问题简述:最长公共子序列 一个数列 S,如果分别是两个或多个已知数列的子序列,且是所有符合此条件序列中最长的,则S 称为已知序列的最长公共子序列. LCS问题的分支:最长公共子串 ...

  9. VS2012JSON自动生成对应的类

    一.复制JSON数据如图 {Key:"aaaa",Value:"bbbb"} 二.点击以下操作

  10. 解决ul显示不在div中的问题

    css样式 #banner { padding: 0px; } #banner ul { list-style: none; margin: 0px; padding: 0px; text-align ...