从网上找了东西，发现都不适合自己的要求，也有纯css实现的，懒得看，大部分是基于js的，当然我的理念是能不用js就不用（这这是个个人怪癖，其实js也没什么，毕竟现在99%以上的浏览器都支持js了）。于是放慢了自己的脚步，自己研究一下吧。当然这里不是最完美的，至于哪里不完美，最后会给出。这里先给出代码。

方式一：内联样式（inline style）

方法：用name:value或property:value方式声明。

优点：

适用于新手。

有利于简单测试，效果立竿见影。

CSS的很多其他属性大多容易理解，比如字体，文本，背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构，以及定位。正如positioniseverything，本文将主要讲述关于 position的理解，力求让您看完本文后对position有着最全面的认识。

兼容IE和FF火狐浏览器的CSS省略号，在网上一个朋友博客中看到的，挺实用！
Code:

.ellipsis a{display: block;width: 300px;overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
/* firefox only */
.ellipsis:not(p) {clear: both;}
.ellipsis:not(p) a {max-width: 300px;float: left;}
.ellipsis:not(p):after {content: “…”;float: left;width: 25px;padding-left: 1px;}

[第一个参数为CSS里的写法,第二个参数为javascript里的写法]

盒子标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth