css精灵技术

CSS精灵英文叫法 `CSS sprites`，通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。

2.1 精灵图的原理

2.1.1 实现步骤

1. 通常要限定容器大小

2. 图片拼合

3. 背景定位

2.1.2 优缺点

**优点**

- 减少网页的 http 请求，从而大大的提高页面的性能

- 图片命名上的困扰

- 更换风格方便

**缺点**

- 必须要限定容器大小符合背景图元素位置

- 需要计算位置。

2.1.3 应用场景

适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。

3.1、单行文本溢出显示省略号

```css

/* 关键代码 */

overflow: hidden;/* 溢出影藏 */

white-space: nowrap;/* 强制不换行 */

text-overflow: ellipsis;/* 溢出显示省略号 */

```

3.2、多行文本溢出显示省略号

3.2.1、方法一：after实现

```css

.box {

width: 200px;

line-height:30px;

height:90px;

background-color: red;

position:relative;

text-align:justify;

overflow: hidden;

}

.box:after{

content:"...";

position:absolute;

right:0;

bottom:0;

background-color: red;

width:1em;

}

```

该方法适用范围广，但文字未超出行的情况下也会出现省略号，可结合js优化该方法。

说明：

1. 将height设置为line-height的整数倍，防止超出的文字露出

2. 给p::after添加渐变背景可避免文字只显示一半

3. 由于ie6-7不显示content内容，所以要添加标签兼容ie6