先看一下效果：
 
好了，看完了效果，现在正式开始今天的开发旅程吧！
 
首先我们先创建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. Linux命令行之逗趣无极限

    Linux命令行之逗趣无极限 . Linux"sl"命令行 尽管"sl"代表了"蒸汽机机头",但它是用来提醒那些命令行控们别把"l ...

  2. Centos下编译Linux内核

    Linux内核编译是一件简单却费事的事.但是独立的编译linux内核会帮助你很好的理解Linux内核的工作机理. 首先编译linux内核我们需要在当前linux操作系统下安装gcc编译器,因为我是Ce ...

  3. python mysqlDB

    1,Description MySQLdb is a Python DB API-2.0-compliant interface Supported versions: * MySQL version ...

  4. mysql 1449 ： The user specified as a definer ('montor'@'%') does not exist

    grant all privileges on *.* to root@"%" identified by "."; flush privileges;  

  5. android JNI库实现reboot，recovery

    1.recovery函数: #define UPDATE_TITLE "--update_package=" #define UPDATE_COMMAND_FILE "/ ...

  6. MySQL导入sql 文件的5大步骤

    http://database.51cto.com/art/201005/200739.htm 以下的文章主要介绍的是MySQL导入sql 文件,即MySQL数据库导入导出sql 文件的实际操作步骤, ...

  7. JDK8环境变量配置相关问题

    1.右键选择 计算机→属性→高级系统设置→高级→环境变量 2.系统变量→新建 变量名:JAVA_HOME 变量值:(变量值填写你的jdk的安装目录,例如本人是 E:Javajdk1.7.0) 3.在系 ...

  8. yum php56

    美国时间2014年11月13日,PHP开发团队,在「PHP 5.6.3 is available|PHP: Hypertext Preprocessor」上公布了PHP5.6系的最新版本「PHP 5. ...

  9. git管理修改

    为什么Git比其他版本控制系统设计得优秀,因为Git跟踪并管理的是修改,而非文件. 新增了一行,这就是一个修改,删除了一行,也是一个修改,更改了某些字符,也是一个修改,删了一些又加了一些,也是一个修改 ...

  10. git使用前配置

    1. git config --global user.name "Trey" 2. git config --global user.email 164355949@qq.com ...