先看一下效果：
 
好了，看完了效果，现在正式开始今天的开发旅程吧！
 
首先我们先创建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. perl 实现微信简版<2>

    <pre name="code" class="python">use LWP::UserAgent; use URI::Escape; use N ...

  2. JavaScript声音播放

    方式一: /** * 播放音频(Chrome.opera)支持 * @param file:支持 rm,mid,wav */ function playAudio(file) { var embed= ...

  3. 区间dp-hdu-4745-Two Rabbits

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4745 题目意思: 给n个环状的数,A.B两人沿相反的方向走,每单位时间走一步,要求相同时间两人到达相 ...

  4. POJ 3368 RMQ-ST

    一直感觉RMQ水,没自己写过,今天写了一道题,算是完全独立写的,这感觉好久没有了... 一直以来,都是为了亚洲赛学算法,出现了几个问题: 1.学的其实只是怎么用算法,对算法的正确性没有好好理解,或者说 ...

  5. python sqlite 查询表的字段名 列名

    获得查询结果表的列名: [python]  view plain copy print ?   db = sqlite.connect('data.db') cur = db.cursor() cur ...

  6. uva 10161 Ant on a Chessboard 蛇形矩阵 简单数学题

    题目给出如下表的一个矩阵: (红字表示行数或列数) 25 24 23 22 21 5 10 11 12 13 20 9 8 7 14 19 3 2 3 6 15 18 2 1 4 5 16 17 1 ...

  7. properties文件value换行处理方式

    书写方式如下,就可以允许key1的value值换行了,但是整个过程要注意不要在文件中出现任何的非英文非半角的字符 key1=Where did you take the picture?\       ...

  8. [Linked List]Reverse Linked List,Reverse Linked List II

    一.Reverse Linked List  (M) Reverse Linked List II (M) Binary Tree Upside Down (E) Palindrome Linked ...

  9. spring中的定时任务调度用例

    在application-quartz.xml配置文件中添加如下配置信息: <!-- Quartz -->     <bean id="getSendEmailObject ...

  10. 封装jQuery插件的步骤

    引语:jQuery提供了很多插件,我们在开发的过程使用插件能节省时间简化开发也避免从头开始编写每个组件,单我们除了懂得使用别人已编写好的插件以外,也到懂得如何封装属于我们自己的插件,以下就是封装jQu ...