|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
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:"...";
}
大大缩减页面代码,提高页面浏览速度,缩减带宽成本; |
|