随手记九——溢出文字处理、背景图片填充、图片代替文字

溢出容器，要打点展示

1、单行文本

2、多行文本

1、单行文本：打开百度我们可以看到一些新闻推送，有些新闻推送如下，在句子后面有...显示，单行文本超出了容器的宽度，所以用打点的方式来显示。

为了实现以上效果，我们可以使用

while-space:nowrap;可以使文字溢出部分不要换行

overfloat:hidden; 溢出部分隐藏

text-overflow:ellipsis; 溢出部分用"..."来显示

这是常用三件套，用于处理这种单行文本溢出

2、多行文本：多行文本不太好处理，但也有办法。百度处理多行文本用的是计算的方式，通过后台估算然后传回数据之后再处理的，是后端处理的，前端负责把容器和高度处理好，这是为了PC端兼容老版本的浏览器。也有更好的技术来处理，属于CSS3内容，并且适用于移动端。

 

 

背景图片填充：

background-image:url(xiaogou.jpg);  就是选择需要填充的图片路径

background-size:200px 200px; 就是决定图片的宽高

如果照片的宽高不等于容器的宽高的话，比如说我改为background-size:100px 100px; 就会有以下效果

那如果保持宽高各一百像素又只想要一张图片在容器里，可以增加属性background-repeat:no-repeat;

这样也不太好看，还可以调整图片的位置。比如说background-position:center center;(left top左上   top center 上中，各种组合，还可以填百分数)

 

练习：处理淘宝网站的一个图片（图片代替文字）

淘宝网页左上方有这么个超链接图片，点击可以进入淘宝首页。这个很好处理，一个优秀的网页需要在网络不良情况下也能实现它的功能(因为在网速低于一定速度的情况下，浏览器会优先加载网站的html，css和js放到后面去，所以我们要确保在这种情况下也能实现页面的基本功能)。

所以我们要实现的是，网络良好的时候是这样的

网络不良的情况下是这样的

有两个可行的方法

第一个：意思就是设置首行缩进大于等于容器宽度，这样可以把淘宝网三个字挤出容器，然后用white-space:nowrap;强制不能换行，这样淘宝网三个字就都在一行上而且都在容器外面了，接着再用overflow:hidden;将容器外面的几个字隐藏。这样子，就能实现用图片代替文字，又不耽误无法加载图片的情况下正常功能的使用啦。

第二个：利用padding能放置背景图片且不能放置内容的特点，用padding支撑起容器的高度，这个时候其实淘宝网三个字已经在容器外面了，然后图片覆盖padding，接着用overfloat:hidden;隐藏淘宝网这几个字，实现同样的内容。