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可以是在内容中加入一个标签，比如<span>...</span>去模拟；要支持IE8，需要将::after替换为:after
使用javascript插件
- clamp.js
- 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(字符串或者正则，可指定返回数组的最大长度【非必须】):分割字符串
<script type="text/javascript">
var str="How are you doing today?"
document.write(str.split(" ") + "<br />");// How,are,you,doing,today?
document.write(str.split("") + "<br />");// H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
document.write(str.split(" ",3));// How,are,you
</script>
2.png
join(指定的连接符) :join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。
4.png
reverse: reverse() 方法用于颠倒数组中元素的顺序。
slice： slice(start,end) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
5.png
charAt(index):根据位置返回字符
