全国服务热线:4008-888-888

技术知识

适配IE和FF的单行外溢文字显示信息省略号


  单写作本的操纵,之前是由程序流程员进行的,完成截字实际效果。
  今日详细介绍的方式适配IE FF,看下面的详尽详细介绍:
  以便更合乎具体,用1个div装起要调节的內容,并为这个div界定1个宽度。
  比如:
css编码:
div{width:200px;}
html编码:
<div>
<span>脚本制作之家-我国网页页面设计方案,网页页面制做第1站 - www.jb51.net</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中完成就要用到十分规的方式,1个标识作切除內容,再加1个标识作弥补省略号用,而且加起来的长度就可以超出器皿的宽度,本例指的便是DIV的宽度200px,完成的念头便是这样。那末再次进1实验,有关切除內容,这个早已基础上处理了,那就来讲补省略号,无需JS,用CSS完成的话就要用到伪目标after,伪目标不懂的就要先去温故或百度搜索1下。先从HTML着手,为span标识外再加1层p标识(自然你还可以加其它标识的)
html编码:
<div>
<p><span>脚本制作之家-我国网页页面设计方案,网页页面制做第1站 - www.jb51.net</span><p>
</div>
  大家再为这个P标识加款式。
CSS:
p:after{
content:"...";
}
  这样还不好,由于省略号是有宽度的,这样省略号就跳到1下行了,下面要做的便是让span 加省略号的宽度不超过器皿宽度(精确的说是相同),而且让省略号紧跟內容的內容,下便是处理上面这些难题的CSS款式:
p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:"...";
}
  这里还要填补的1点是有关p span 的宽度用了"max-width"这个特性,IE不可以解释该特性,而FF能够,这样就绕开了IE对SPAN宽度的再次运用。上面说得有乱,梳理以下:
html编码:
<div>
<p><span>脚本制作之家-我国网页页面设计方案,网页页面制做第1站 - www.jb51.net</span><p>
</div>
css编码:
div{
width:200px;/*器皿的基础界定*/
height:200px;
background-color:#eee;
}
/* IE下的款式 */
p span{
display: block;
width:200px;/*对宽度的界定,依据状况改动*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}/* FF 下的款式 */
p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:"...";
}


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服