CSS补充知识-文字溢出处理和文字图片代替问题

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;
}