前端技巧总结

平常总结一些前端的实用技巧，方便之后查询使用

1）超出文本部分用省略号代替

　　text-overflow:ellipsis;

　　white-space:nowrap;

　　overflow:hidden;

　　text-overflow  盒中的内容在水平方向溢出显示省略号

　　white-space  设定内容不能换行，在左边溢出

兼容性：text-overflow   --IE     -webkit-text-overflow   --safair浏览器   -o-text-overflow  --opera浏览器

2）浏览器默认光标修改

　　cursor：url(image/cursor.jpg),auto; 自定义光标 注意图片不该过大，width最大值为128px

　　cursor：pointer   手样式

　　cursor：default   箭头样式

　　更多的cursor请查看W3School上相关内容-->点击跳转查看<--

3）浏览器默认select样式修改

select{
    /*chrome和FF里面的边框不同，因此复写下*/
    border:1px solid #000;
    /*将默认的select选择框样式清除*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    /*在选择框的最右侧中间显示小箭头图片*/
    background:url(http://ourjs.github.io/static/2015/arrow.png) no-repeat right center transparent;

    /*为下拉小箭头留位置，避免被文字覆盖*/
    padding-right:14px;
}

select增长onchange事件也能够修改样式

4）图片和文字并排显示问题

　　在一个li中是小图标和数字并排显示，可是效果出来并非想要的效果。

后来查找到给img添加属性vertical-align：middle便可。

添加后的效果：

若是想深刻理解vertical-align属性，可看看张鑫旭大神的《我对CSS vertical-align的一些认识与理解》

5）p标签内文字换行

　　有时候须要p标签内的文字自动换行，使用CSS3的word-break属性，该属性取值有是三个，normal、break-all以及hyphenate。normal表示按照浏览器默认的换行规则；break-all容许在单词内换行；hyphenate在恰当的断字点前换行。

　　从上面的效果能够看出来，normal和hyphenate的效果是同样的，在合适的断字点换行，每一行最少有一个单词，即便单词有可能溢出。而break-all会切断单词，不会出现单词溢出的状况，因此通常都取break-al。l