CSS3网页制作教程:overflow属性超过一行显示省略号

文章简介:overflow属性应用-不换行,超过一行显示省略号.

overflow属性-原本是ie浏览器独自开发的属性,由于在css3中被采用,得到了其他浏览器的支持。

指定对于盒内容纳不下的内容显示的方法。

Overflow:hidden 对于超出容纳范围的文字会被隐藏。

Overflow:scroll div元素出现固定的水平滚动条与垂直滚动条

Overflow:auto 当文字超出是根据需要才会出现水平滚动条或者垂直滚动条

Overflow:visible
则显示效果与不使用overflow属性时一样

Overflow-x、Overflow-y可以单独指定水平方向上或者垂直方向上内容超出盒的容纳范围时的显示方法。出现滚动条。

Text-overflow:设置内容在水平方向出现省略号。(white-space:nowrap使得盒右端内容不能换行显示。)

.text{

width:200px;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

-webkit-text-overflow:ellipsis;

-moz-text-overflow:ellipsis;

white-space:nowrap;

}

<div class="text">文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</div>

时间: 2024-10-03 19:04:44

CSS3网页制作教程:overflow属性超过一行显示省略号的相关文章

CSS3网页制作教程:闪烁跳跃的进度条

文章简介:今天为大家带来另一款更具个性化的进度条:CSS3闪烁跳跃的进度条. 今天为大家带来另一款更具个性化的进度条:CSS3闪烁跳跃的进度条. 这个示例的原理和以前的都是一样的,都是通过大量的css3属性来实现的,如:animation.transform.keyframes等等属性.值得注意的是这个示例采用了结构性伪类选择符E:nth-child(n),来进行对HTML元素的选择以及控制输出.相信这个伪类选择符在将来会是一个很强大的一个工具.推荐大家多多了解以及实践使用. 这个伪类选择符E:

CSS3网页制作教程:详解CSS3实现圆角代码

文章简介:其实CSS3实现圆角的方法只需要设置一个属性:border-radius(边框半径),只要设置一个值就能同时设置四个圆角的半径. 其实CSS3实现圆角的方法只需要设置一个属性:border-radius(边框半径),只要设置一个值就能同时设置四个圆角的半径 给你一个DIV 设置他的圆角半径:border-radius:15px: border-radius可以同时设置1到4个值.如果设置1个值,表示4个圆角都使用这个值.如果设置2个值,表示左上角和右下角使用第1个值,右上角和左下角使用

CSS3网页制作教程:Action:hovert

文章简介:CSS3实现多种Action:hovert效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><me

《ASP网页制作教程》笔记

笔记|教程|网页 <ASP网页制作教程>.王国荣 编著,人民邮电出版社. 打开MDB数据库的方法:先定义一个OpenMDB子程序,然后在主程序中调用.<%Option ExplicitSub OpenMDB(dbname,pwd,conn)'dbname-数据库文件的相对路径,pwd-数据库文件的密码,conn-用户定义的Connection对象.'对于没有密码的数据库,pwd值可任意.dim connstrSet conn = Server.CreateObject("ADO

Android设置TextView显示指定个数字符,超过部分显示...(省略号)的方法_Android

本文实例讲述了Android设置TextView显示指定个数字符,超过部分显示...(省略号)的方法.分享给大家供大家参考,具体如下: 一.问题: 今天在公司遇到一个需求:TextView设置最多显示8个字符,超过部分显示...(省略号) 二.解决方法: 网上找了很多资料,有人说分别设置TextView的android:signature="true",并且设置android:ellipsize="end";但是我试了,并没有成功,最后自己试出一种方式如下:供大家参

CSS3网页制作实例教程:网页图片遮罩效果

文章简介:巧用CSS3 border制作图片遮罩效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta

Dreamweaver网页制作教程:表格设计

dreamweaver|教程|设计|网页 表格设计 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.本节教程我们分为两步来进行.首先看表格操作的一个实例.然后来看一些表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面

Dreamweaver网页制作教程:超级链接

  超级链接 作为网站肯定有很多的页面,如果页面之间彼此是独立的,那么网页就好比是孤岛,这样的网站是无法运行的.为了建立起网页之间的联系我们必须使用超级链接.称"超级链接",是因为它什么都能链接,如:网页.下载文件.网站地址.邮件地址--等等.下边我们就来讨论怎样在网页中创建超级链接. [页面之间的超级连接] 在网页中,单击了某些图片.有下划线或有明示链接的文字就会跳转到相应的网页中去. 1.在网页中选中要做超级链接的文字或者图片. 2.在属性面板中单击黄色文件夹图标,在弹出的对话框里

Dreamweaver网页制作教程:定义站点

dreamweaver|教程|网页|站点 Web 站点是一组具有如相关主题.类似的设计.链接文档和资源.Dreamweaver MX 2004 是一个站点创建和管理工具,因此使用它不仅可以创建单独的文档,还可以创建完整的 Web 站点.创建 Web 站点的第一步是规划.为了达到最佳效果,在创建任何 Web 站点页面之前,应对站点的结构进行设计和规划.决定要创建多少页,每页上显示什么内容,页面布局的外观以及页是如何互相连接起来的. 请执行以下操作: 启动 Dreamweaver MX 2004: