CSS實現DIV超長截斷，並顯示...

-Advertisement-

DIV顯示內容有時會超長，並把頁面撐的很難看，以前的做法是在JS中，或者後臺判斷其長度，過長就截斷，但由於中英文數字展示的寬度並不一樣，截斷的長度也就只能取最小值，展示的效果也不好。利用CSS提供的方法，可以完美的解決該問題。這裡寬度是必須定義的，

DIV顯示內容有時會超長，並把頁面撐的很難看，

以前的做法是在JS中，或者後臺判斷其長度，過長就截斷，

但由於中英文數字展示的寬度並不一樣，截斷的長度也就只能取最小值，

展示的效果也不好。利用CSS提供的方法，可以完美的解決該問題。

1 .project-Name{
2     width:280px; 
3     overflow:hidden; 
4     text-overflow:ellipsis;
5     white-space: nowrap;
6 }

這裡寬度是必須定義的，

overflow:hidden;表示超長部分不顯示

text-overflow:ellipsis;表示超長顯示...

white-space: nowrap;表示不折行顯示

該樣式也可以應用於其他一些標簽，最好在可以加TITLE的標簽上使用，
因為可以加TITLE顯示全部的信息哦

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

javascript模塊化詳解

模塊化：每個模塊只完成一個獨立的功能，然後提供該功能的介面。模塊間通過介面訪問。模塊中的（過程和數據）對於其它模塊來說是私有的（不能訪問修改）原始人寫法：這種寫法已經有點模塊的樣子了，一下就能看出這幾個函數和變數之間的聯繫。缺點在於所有變數都必須聲明為公有，所以都要加this指示作用域以引用這
把react什麼的都用起來【2】非同步action和redux中間件

現代web頁面里到處都是ajax，所以處理好非同步的代碼非常重要。這次我重新選了個適合展示非同步處理的應用場景——搜索新聞列表。由於有現成的介面，我們就不用自己搭服務了。我在網上隨便搜到了一個新聞服務介面，支持jsonp，就用它吧。一開始，咱們仍然按照action->reducer->compon
尖沙咀到底誰說的算？！--- CSS層疊

前些天，我朋友發了這個段CSS我。 Q：color是哪個？ A： 000 不是麽？ what the fuck ！！結果是 fff。作為一個頁面仔我表示。。。經過修行，我弄得了它們的規矩。在一大堆css規則中，到底哪個有效。這其實由這3個說的算特殊性（權重）、重要性、繼承。特殊性簡單的說
讓 innerHTML 進來的 script 代碼跑起來

今天來簡單聊聊如何讓 innerHTML 進來的 scrip 代碼跑起來的問題。前臺請求一個介面，介面返回一些 HTML 標簽拼接成的字元串，以供前端直接 innerHTML 生成 DOM 元素，這樣的做法非常普遍。但是你是否遇到過，如果字元串中拼接的 HTML 標簽中有 script 標簽，那麼
js字元串大小寫轉換

var str = 'hello world'; alert(str.toUpperCase());//將字元串轉換為大寫。 alert(str.toLowerCase());//將字元串轉換為小寫。 alert(str.toLocaleUpperCase());//也是將字元串轉換為大寫的一種方式
jQuery與Zepto的異同

一,同： Zepto最初是為移動端開發的庫，是jQuery的輕量級替代品，因為它的API和jQuery相似，而文件更小。Zepto最大的優勢是它的文件大小，只有8k多，是目前功能完備的庫中最小的一個，儘管不大，Zepto所提供的工具足以滿足開發程式的需要。大多數在jQuery中·常用的API和方法Z
div的垂直居中

html垂直居中
js超簡單日曆

用原生js寫了一個超級簡單的日曆。當做是練習js中的Date類型。思路： html css js 效果圖：