仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 702|回复: 6
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:兼容IE和FF的单行溢出文本显现省略号

[复制链接]
山那边是海 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:10:46 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。
  单行文本的把持,之前是由程序员完成的,完成截字效果。
  明天先容的办法兼容IEFF,看上面的具体先容:
  为了更切合实践,用一个div装起要调试的内容,并为这个div界说一个宽度。
  比方:
CSS代码:
div{width:200px;}
html代码:
<div>
<span>网页教授教养网-中国网页计划,网页制造第一站-www.poluoluo.com</span>
</div>
  在IE中完成长短常复杂的,CSS以下:
span{
display:block;
width:200px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
  但在FF顶用下面的款式是完成不了的,由于text-overflow:ellipsis;是IE中独有的(非CSS尺度)。如今在FF下看到的仅仅只是把溢出的内容切除,说到"溢出切除",这下说到点子上了,在FF中完成就要用到十分规的办法,一个标签作切除内容,再加一个标签作弥补省略号用,而且加起来的长度就可以凌驾容器的宽度,本例指的就是DIV的宽度200px,完成的设法就是如许。那末持续进一实验,关于切除内容,这个已基础上办理了,那就来讲补省略号,不必JS,用CSS完成的话就要用到伪工具after,伪工具不懂的就要先往温故或百度一下。先从HTML动手,为span标签外再加一层p标签(固然你也能够加别的标签的)
html代码:
<div>
<p><span>网页教授教养网-中国网页计划,网页制造第一站-www.poluoluo.com</span><p>
</div>
  我们再为这个P标签加款式。
CSS:
p:after{
content:"...";
}
  如许还不可,由于省略号是有宽度的,如许省略号就跳到一下行了,上面要做的就是让span加省略号的宽度不年夜于容器宽度(正确的说是相称),而且让省略号紧跟内容的内容,下就是办理下面这些成绩的CSS款式:
p{clear:both;}
pspan{float:left;
max-width:175px;
}
p:after{
content:"...";
}
  这里还要增补的一点是关于pspan的宽度用了"max-width"这个属性,IE不克不及注释该属性,而FF能够,如许就避开了IE对SPAN宽度的从头使用。下面说得有乱,归结以下:
html代码:
<div>
<p><span>网页教授教养网-中国网页计划,网页制造第一站-www.poluoluo.com</span><p>
</div>
css代码:
div{
width:200px;/*容器的基础界说*/
height:200px;
background-color:#eee;
}
/*IE下的款式*/
pspan{
display:block;
width:200px;/*对宽度的界说,依据情形修正*/
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}/*FF下的款式*/
p{clear:both;}
pspan{float:left;
max-width:175px;
}
p:after{
content:"...";
}

大大缩减页面代码,提高页面浏览速度,缩减带宽成本;
海妖 该用户已被删除
沙发
发表于 2015-1-18 05:29:46 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
精灵巫婆 该用户已被删除
板凳
发表于 2015-1-24 16:58:29 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
爱飞 该用户已被删除
地板
发表于 2015-2-2 11:43:49 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
若相依 该用户已被删除
5#
发表于 2015-2-23 10:48:13 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
不帅 该用户已被删除
6#
发表于 2015-3-7 08:35:57 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
蒙在股里 该用户已被删除
7#
发表于 2015-3-14 20:55:28 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-10 06:33

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表