强制一行显示等几个CSS小技巧

世界杯开幕了，可能最近博客更新会少一些。毕竟文章随时都可以写，世界杯四年才一次，更何况那么精彩，呵呵。
今天整理了一些 CSS 的小技巧，有的常用，有的不常用，有的简单，有的繁琐。事实上，这些东西能不能记住无关紧要，重要的是在需要的时候知道从哪里可以找到。

强制一行显示：

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

强制换行显示：

一行文本中若出现的较长的英文单词，可能会使得文字内容超出容器范围，尽管已经为容器设置了宽度，但浏览器在遇到空格前是不会换行的。为容器添加下面的属性，可以拆开单词强制换行。

word-wrap: break-word;

word-break: break-all;

 

清理浮动:

/** 首先定义一个class ，这里命名为 clear **/



.clear:after{

    clear: both;

    content: '.';

    display: block;

    visibility: hidden;

    height: 0;

}

.clear{

    display: inline-block;

}

* html .clear {

    height: 1%

}

.clear{

    display: block

}

<!--- 上面的工作完成后 --->

<!--- 给容器的 class 属性加上 clear 就可以轻松地清理浮动 --->

<div class="clear">

<div style="float:left"></div>

<div style="float:right"></div>

</div>

纯CSS实现图片预加载

通过把图片作为元素背景定义到css，并将元素写入到页面里，可以实现图片预加载，这是一个简单但是非常实用的小技巧。每个项目都可能会用到，比如说 ajax loading 时的小图标，总不能等到请求 ajax 的时候再加载。

#preloadedImages {

	width: 0px;

	height: 0px;

	display: inline;

	background-image: url("path");

}

CSS 属性 Hack：

color:red;	/* Not IE */

color:blue\9; /* IE */

color:orange\0; /* IE 8-9 */

+color:gold; /* IE 7 */

*color:black; /* IE 6-7 */

_color:pink; /* IE 6 */