一些基础的回顾

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):根据位置返回字符

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

一些基础的回顾