偶然看到一篇類似css技巧與經驗總結的文章，其中有一部分非常熟悉，那就是“css控制元素內文本超出部分使用省略號代替”，一般實際工作中， 很多產品經理會對頁面UI有這樣的要求。還記得，第一次做這個功能時，是通過百度到的，然後就是一勞永逸，直接記事本記錄下來，以後基本上 就是拿來主義，根本就沒有去研究 ...
偶然看到一篇類似css技巧與經驗總結的文章，其中有一部分非常熟悉，那就是“css控制元素內文本超出部分使用省略號代替”，一般實際工作中，
很多產品經理會對頁面UI有這樣的要求。還記得，第一次做這個功能時，是通過百度到的，然後就是一勞永逸，直接記事本記錄下來，以後基本上
就是拿來主義，根本就沒有去研究一下其中的原理（其實也沒什麼原理，方法也很簡單，O(∩_∩)O哈哈~），恰逢今日又碰到了，那就做個了斷吧。
實現如題的功能，我們常用的代碼如下：
p{ width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
這裡P標簽的4個css屬性都是必要的，這些屬性都起到什麼作用呢？
width：用於設置p標簽的寬度，如果沒有寬度，何為“超出”，對吧？即使是沒有手動的為p標簽設定寬度，那麼p標簽橫向也會自動充滿父元素，也就是所說的100%；
white-space:這個屬性不得了，特別值為“nowrap”的時候，為何這麼說呢，因為當塊級元素內的文本如果超過一行，即多行時，文本預設是要換行的，絕不會出現溢出
的情況；但是如果元素設置了這個屬性white-space:nowrap，那麼文本會無視父元素的寬度限制，結果就是文本溢出，如下圖：
結果就是這樣，你說它牛叉不牛叉。
overflow：該屬性是告訴元素，如果它內部包含的元素（圖片、文本、其他元素等等）超出它的長寬範圍時該如何處理，是顯示滾動條呢，還是隱藏超出部分呢？而我們
當前所說的案例是需要超出的文本被隱藏，所以我們設置overflow:hidden。
text-overflow:這個屬性是CSS3的新屬性，下麵是官方解釋：
我們需要把它的值設為ellipsis，該值的意思就是以省略號代替超出的文本部分。
4個屬性值組合起來使用，最後達到了這樣的效果：
代碼
運行結果
結語：希望此篇文章可以對像我一樣“拿來主義”的童鞋們有所幫助
