今天在哈爾濱今日圖靈學校，有朋友說起了應用css樣式來實現文章標題多出的截去以省略號代替的方法(說來慚愧這方法早知道可竟然沒仔細了解)，看到演示，如夢方醒，以後再也不費力氣用程式來截去多餘字串了...
這個方法很簡單主要就是應用css中的text-overflow:ellipsis實現：
首先我們來看看text-overflow的語法：
語法：text-overflow : clip | ellipsis
引數：clip : 不顯示省略標記（...），而是簡單的裁切
ellipsis : 當物件內文字溢位時顯示省略標記（...）
說明：設定或檢索是否使用乙個省略標記（...）標示物件內文字的溢位。
注意，text-overflow:ellipsis屬性在ff中是沒有效果的。
同時應用：text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 就實現了想要得到的溢位文字顯示省略號效果：
示例**如下：
不知道為什麼text-overflow一直是乙個不常用的樣式，比起在後台用程式截斷文字再附上省略標記的做法，用css來處理文字溢位顯然更溫和(unobtrusive)一些,而且這樣做對搜尋引擎更加友好，。而且它已經被定義在css 3 規範中，但目前為止，還只有ie 提供了對其的支援，firefox似乎落後一步…
這種做法十分簡單，你不用關心頁面顯示字型會怎麼變，它只認寬度，因為這一切都由瀏覽器來進行渲染，瀏覽器當然最有發言權，它自然也就最清楚自己在做什麼，相反當你還在後台甚至是還未顯示時的js中進行截字串處理，前台展示仍存太多未知數。
css實現標題縮略成
實現標題縮略成 之前常做的方法是用程式計算字串長度再截字。這個很煩，有中英文的字串截出來的長短不一。下面用css來實這個小功能 用ie6 ie7 opera9.6 safari3.1.2測試通過 html檔案如下 html head title new document title meta nam...
css實現文字單行，多行縮略方法
hidden 超出內容隱藏 white space nowrap 文字不換行 text overflow ellipsis 文字超出內容用 代替 webkit box 建立盒子模型 webkit line clamp 2 規定顯示的 行數 autoprefixer off 參考其他資料時，說這個會在...
CSS 文字溢位省略顯示
實現文字顯示單行或多行，超出部分用省略號顯示是乙個很常見的需求，在這裡做個分享記錄。文末有 demo 演示 下面是單行縮略的實現 overflow hidden text overflow ellipsis white space nowrap 注 要在塊級元素設定 單行縮略很簡單，唯一比較生疏的是...