先看一下效果：
 
好了，看完了效果，现在正式开始今天的开发旅程吧！
 
首先我们先创建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. (续)顺序表之单循环链表(C语言实现)

    单循环链表和单链表的唯一区别在于单循环链表的最后一个节点的指针域指向第一个节点, 使得整个链表形成一个环. C实现代码如下: #include<stdio.h> typedef struc ...

  2. OMNeT++安装教程

    前提及注意事项: 1) 安装之前首先要确定已经安装好GCC编译环境(例如:MinGW.Cygwin,选择一种安装); (否则OMNeT++会安装不成功),具体安装教程详见另一篇文章 MinGW安装教程 ...

  3. UVA - 11882 Biggest Number(dfs+bfs+强剪枝)

    题目大意:给出一个方格矩阵,矩阵中有数字0~9,任选一个格子为起点,将走过的数字连起来构成一个数,找出最大的那个数,每个格子只能走一次. 题目分析:DFS.剪枝方案:在当前的处境下,找出所有还能到达的 ...

  4. TimeSpan类【转】

    TimeSpan ts1 = new TimeSpan(DateTime.Now.Ticks); //获取当前时间的刻度数 //执行某操作 ............................ . ...

  5. Android学习之Notification

    Notification可以在手机的状态栏发出一则通知,它需要用NotificationManager来管理,实现Notification其实很简单. 1.通过getsystemservice方法获得 ...

  6. PhoneGap Xcode iOS教程

    http://mobile.51cto.com/web-334924.htmhttp://phonegap.com/install/http://www.phonegap100.com/jiaoche ...

  7. 解决UITableView数据没有充满屏幕时，显示多余的空白cell的问题

    #pragma mark 去除多余的线 -(void) clearExtrLine{ UIView *view = [[UIView alloc] init]; view.backgroundColo ...

  8. [Tree]Binary Tree Inorder Traversal

    Total Accepted: 98729 Total Submissions: 261539 Difficulty: Medium Given a binary tree, return the i ...

  9. Linux系统针对网卡中断的优化处理

    摘要: 中断: 当网卡接收到数据包后,会触发硬中断,通知CPU来收包.硬中断是一个CPU和网卡交互的过程.这其实会消耗CPU资源.特别是在使用速度极快的万兆网卡 之后,大量的网络交互使得CPU很大一部 ...

  10. struts2的对象工厂（ObjectFactory）

    ObjectFactory,是xwork中很重要的一个类,是产生action的地方.单独使用xwork的时候,action都是这个类创建的.struts2包装了ObjectFactory,自成了一个S ...