若是css足夠強大了，你還會用編程的方式實現去實現css已有的功能嗎？

如今css3 都出來的，可是其實我因爲一些緣由，有些css2中都能支持的樣式，我都沒有使用過。我感受我真的有必要靜下心來，去看看那些東西，看看哪些之前都被忽視掉的。 今天我主要來說三個對於咱們編程常常用到的，具體以下。

1、 有序列表序號

a、應用場景

有一個列表，須要有序號展現，方便用戶知道當前列表記錄數，用戶能夠任意刪除其中一條記錄，刪除後，序號從新整理。

b、思考

我之前的不知道有樣式的一般作法是，列表信息在展現時經過索引+1，變成當前記錄的序號，這個方法很簡單。可是在記錄任意刪除時就麻煩了，明明能夠把本身經過jquery當前記錄remove掉就了，序號要從新整理就是一見頭痛的事。其實習慣了也不頭痛，我會使用$.each()，使用其中的索引，也能達到效果。可是咱們程序員，就是要用最簡單的方式，實現最強大的功能。這樣咱們纔有更多的時間去關注系統業務邏輯。

c、 學習

http://www.w3school.com.cn/cssref/pr_list-style-type.asp

d、 注意

畢竟css是外國人的弄出來的，中文的1、2、三這種序號沒法經過這種方式實現

e、 圖例

2、 顯示省略符號來表明被修剪的文本

a、應用場景

這個場景，我想我不用描述你們都知道，要顯示的內容較多時，若是不進行修剪，頁面有可能會撐變形。

b、思考

其實咱們之前老是喜歡經過程序，截斷字符串，而後拼接省略號來展現。一般狀況下，這個方式基本達到咱們想要的結果。可是咱們想有沒有想過，假設咱們在寬度爲100px的div裏，字符串只能展現10個漢字，那咱們實現程序的時候，經過截取9個漢字+「…」來展現，當咱們實際展現的字符串沒有超過10個漢字，咱們還不能拼接「…」。前面這個經過程序來邏輯來處理，是否是感受很麻煩？更麻煩的狀況是，把div的寬度調整到200px，那頭疼的問題來了，修改程序的截取19個漢字。瞬間是不有點煩躁了？最麻煩的狀況，如今來了，英文字母，「I」與「M」，他們10個「I」和10個「M」各自所佔的寬度，相差甚遠。我再也不描述，我相信我講這個英文字母的用意。

c、 學習

http://www.w3school.com.cn/cssref/pr_text-overflow.asp

d、 注意

要想達到截取的效果，當前標籤的寬度必須是固定的。不然可能達不到修剪的效果。

e、 圖例

3、 後臺

a、應用場景

這裏我就用一幅圖展現，就不過多的描述了。

b、思考

這個場景咱們遇到的比較少，一般漢字根本出現這種狀況，可是英語就會出現了，像上面的第二行，系統把它識別成一個單詞，因此不給予強制換行。可是這個就跟咱們想要的美觀樣式，就差的很遠了。

c、 學習

http://www.w3school.com.cn/cssref/pr_word-break.asp

d、 注意

在中文範圍內基本不用考慮這個問題，英文單個單詞超長，纔會出現這樣的問題。這個問題是咱們測試部倒騰出來的，是但願你們能注意到有這麼回事。

e、 圖例

總結：這個話題，主要是出於兩個目的，一是，但願你們能回頭看看已經學過的知識，我是否是有些遺漏了，或者當時認識還不夠深入；二是，但願你們往前看看，有沒有更好的辦法代替原來笨拙的實現方式。上面寫的內容，其實算是舊東西，可是不少攻城獅仍是採起老的方式實現。因此這裏只是起一個拋磚引玉的做用，但願你們能掌握新的知識把原來老舊的知識給替換掉，同時也要可以對過往進行回眸。