日常记录

css超过长度显示省略号

text-overflow ellipsis
overflow hidden
white-space nowrap

超过两行折行。显示省略号

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

div居中

position: absolute;
left: 50%;
top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;

文本遇到换行符折行显示

后端传的换行符，前端要折行显示

function a() {
    var test = '便宜-有断行\n你好啊'
    var detailDesc ='';
    var arr = []
    for (let i = 0; i < test.length; i++) {
        let c = test.substr(i, 1);
        if ( c == "\n") {
            arr.push(detailDesc)
            detailDesc = ''
            // detailDesc = detailDesc + "</br>";
        }
        else if (c != "\r") {
            detailDesc = detailDesc + c;
        }
    }
    arr.push(detailDesc)
    console.log(arr)
}
a()

元素360度旋转一周

.div{
  transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  transition: 0.3s;
  -ms-transition: 0.3s;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
}

li前面的圆点修改颜色

可以设置li的字体为圆点的颜色，其他文字部分用span标签包裹再写样式。
圆点跟文字间距太大，可以设置margin-left:负数
list-style-position: inside;表示圆点包括进实际的li宽度中，默认的是圆点在外部的