溢出的文字省略号显示 css精灵技术 margin-left 负值可以解决边框问题

<title>溢出的文字省略号显示</title>
<style>
div {
width: 150px;
height: 25px;
border: 1px solid pink;
/*当文字显示不开的时候，自动换行*/
/*white-space: normal;*/
/*1. 要文字强制一行内显示 除非 遇到 br */
white-space: nowrap;
/*2. 溢出隐藏*/
overflow: hidden;
/*3. 文字溢出 用省略号替代 ellipsis 省略号*/
text-overflow: ellipsis;

}
</style>

 

 

.icon1 {
width: 23px;
height: 23px;
background: url(images/index.png) no-repeat 0 -107px;
/*background-position: 0 -107px;*/
}
.icon2 {
width: 23px;
height: 23px;
background: url(images/index.png) no-repeat -157px -107px;
margin: 100px;
}

 

 

/*浮动的盒子是紧贴在一起的*/
float: left;
width: 200px;
height: 300px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;