1、文字溢出问题
文字溢出分为单行文本和多行文本。单行文本溢出处理固定的三个步骤,先是取消文本换行功能,然后再使溢出部分隐藏,隐藏部分用...显示。
p{
width:100px;
height: 20px;
line-height: 20px;
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
而多行文本的溢出是截断处理,看了大型网站的做法是截断了最后一部分手写省略号,元素的高度是字体行高的几倍就是需要显示几行。
2、文字图片代替问题
当浏览器在网速过低情况下,会采用默认加载方式,自动屏蔽CSS和JS代码,优先显示更重要的HTML代码。那如果图片的引用代码在CSS代码中,此时默认加载情况下网页中该如何显示?
譬如,
<a href="http://www.baidu.com" target="_blank">百度一下</a>
a{
text-decoration: none;
color:#424242;
display: block;
width:120px;
height:40px;
background-image: url(baidu.gif);
background-repeat:no-repeat;
}
当CSS代码未加载时,为保证页面能正常使用,需要有文字提示的跳转,如果如上两部分都写,在CSS代码能加载时候,会有如下效果,
在该类型问题下,有两种解决方式。
(1)方式一:在原有CSS代码下,需要增添三步操作,这也就是为了在CSS代码未加载时候可以显示HTML中显示的文字部分,而在CSS代码正常显示时隐藏该文字部分。先是首行缩进,缩进这个百度图片的宽度,为了让文字部分紧接着图片显示,然后取消文字换行效果,对超出部分隐藏。
a{
text-decoration: none;
color:#424242;
display: block;
width:120px;
height:40px;
background-image: url(baidu.gif);
background-repeat:no-repeat;
text-indent:120px;
white-space:nowrap;
overflow:hidden;
}
(2)方式二:一个盒子模型有内容区、padding和border。对盒子增添背景颜色或是背景图片,受到影响的是内容区和padding区,就此产生第二个解决办法。设置元素高度为0,用padding区撑起图片的高度,用来存放图片,那么文字部分就会超出显示,超出部分再隐藏。
a{
text-decoration: none;
color:#424242;
display: block;
width:120px;
height:0;
background-image: url(baidu.gif);
background-repeat:no-repeat;
padding-top:40px;
overflow: hidden;
}