前端技巧總結

平常總結一些前端的實用技巧，方便之後查詢使用

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