单行文本溢出隐藏

单行文本溢出隐藏

overflow:hidden;(溢出隐藏)

white-space:nowrap;(强制不换行)

text-overflow:ellipsis;(溢出显示省略号)

text-align:justify;(文字两端对齐)

p:after{(伪类)

content:"...";(内容)

}

d多行文本溢出隐藏

(弹性盒)

display:webite-box;

(弹性盒子元素垂直排列)

webkit:box-orient; vertical；

(控制要显示的行数)

webkit-line-clamp:4;

overflow:hadden;

注意:该方法适用于webkit浏览器及移动端

css精灵:(雪碧图)

css精灵英文叫法‘css sprites’,通常被解释为"css 贴图定位",其实就是把网页

中一些背景图片整合到一张图片文件中,再利用css"background-img",background-repect",

"background-position"的组合进行背景定位，background-position精确的定位出背景图片的位置

实现步骤:

1、限定容器的大小

2、图片拼合

3、背景定位

优点:

1、减少网页的http的请求,从而大大提高页面的性能

2、图片命名上的困扰

3、更换风格方便

缺点:

1、必须要限定容器的大小

2、需要计算位置

使用场景:

适用于一般小图片(小图标、小背景),不适用于大背景和大布局图片