一些基础的回顾

css实现单行，多行文本溢出显示省略号...

单行文本

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
(容器必须设置宽度)

效果如图:

1.png

多行文本(适合webkit浏览器和移动端,大部分移动端浏览器都是webkit内核)

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

-webkit-line-clamp： 显示块元素显示的文本行数

-webkit-box-orient： 设置或检索伸缩盒对象的子元素的排列方式

display:-webkit-box: 将对象作为弹性伸缩盒子模型展示

兼容性写法

p {
  font-size: 15px;
  width: 500px;
  position: relative;
  height: 3.6em;
  line-height: 1.2em;
  overflow: hidden;
}
p::after{
  position: absolute;
  content: '...';
  bottom: 0;
  right: 0;
  padding:0 20px 1px 45px;
  background: -webkit-linear-gradient(left, transparent, #fff 55%);
  background: -o-linear-gradient(right, transparent, #fff 55%);
  background: -moz-linear-gradient(right, transparent, #fff 55%);
  background: linear-gradient(to right, transparent, #fff 55%);
}

设置容器相对定位，添加伪类(省略号...模拟)
IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如...去模拟；要支持IE8，需要将::after替换为:after

使用javascript插件

1. clamp.js
2. jQuery插件 jquery.dotdotdot

原文地址：http://www.daqianduan.com/6179.html

清除浮动的方法

1.受影响的元素clear: left|right|box;
2.父级元素设置overflow：hidden;
3.最佳实践：
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

命名规范

edit.png

自己经常遗忘的一些javascript内置方法

split(字符串或者正则，可指定返回数组的最大长度【非必须】):分割字符串

2.png

join(指定的连接符) :join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。

4.png

reverse: reverse() 方法用于颠倒数组中元素的顺序。

slice： slice(start,end) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

5.png

charAt(index):根据位置返回字符