css小技巧

1.强制换行

word-break: break-all;

2.强制不换行

white-space: nowrap;

3.鼠标划过显示小手

cursor: pointer;

4.文本溢出显示省略号（一行）

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

5.文字溢出显示省略号（多行）

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

6.盒子大小

box-sizing: border-box;  设置的宽高代表盒子实际大小

box-sizing: content-box; 设置的宽高代表盒子内容区域大小

7.div实现input效果: contenteditable="true"即可编辑div

<div contenteditable="true"></div>

8.修改input中placeholder的样式

//webkit内核的浏览器

input::-webkit-input-placeholder {

    color: #c2c6ce;

}

//Firefox版本4-18

input:-moz-placeholder {

    color: #c2c6ce;

}

//Firefox版本19+

input::-moz-placeholder {

    color: #c2c6ce;

}

//IE浏览器

input:-ms-input-placeholder {

    color: #c2c6ce;

}

9.css实现文本两端对齐

div{

    text-align: justify;

    text-justify: distribute-all-lines;  //ie6-8

    text-align-last: justify;  //一个块或行的最后一行对齐方式

    -moz-text-align-last: justify;

    -webkit-text-align-last: justify;

}

10.隐藏滚动条样式

.house-list::-webkit-scrollbar { width: 0 !important } 
.house-list { -ms-overflow-style: none; } // IE10+
.house-list { overflow: -moz-scrollbars-none; } // Firefox

11.渲染富文本空格

会发现渲染的空格和富文本不一致，只需加如下一个样式就可以解决哦

white-space: pre-wrap;