引言：

寫前端UI的朋友們也許都遇到過這樣的問題：我們需要實現(xiàn)這樣一個需求，在一個父級元素中隱藏一個可能過長的文本：

 

這個文本可能是單行的：

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

也可能是多行的：

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn) 

下面我就給大家展示如何簡單或優(yōu)雅地實現(xiàn)這種需求

 

單行文本溢出的省略

 

先上代碼

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

<div style =  'width:400px;
               height:40px;
               border:1px solid red;'>
        <p style='overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;'>
          這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本        </p>
</div>

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

demo:

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

關(guān)于overflow: hidden

這里我們需要注意到一點：這里的overflow并不是設(shè)置為父級元素div的屬性，而是p標簽的屬性，需要和overflow的普通用法區(qū)分開來

1overflow：hidden的普通用法：用在塊級元素（例如div）的外層隱藏內(nèi)部溢出元素

2overflow: hidden的特殊用法：在上述例子中配合text-overflow: ellipsis;white-space: nowrap;實現(xiàn)p元素隱藏自身的溢出并設(shè)置（...）的效果

 

關(guān)于text-overflow: ellipsis;

這一屬性依賴于overflow: hidden存在，只有設(shè)置了overflow:hidden它才是能夠生效的，你可以把它看作overflow對于文本溢出隱藏的一種‘特殊樣式’

 

關(guān)于white-space: nowrap

它的作用是讓文本不換行，這是overflow:hidden和text-overflow：ellipsis生效的基礎(chǔ)！沒有它overflow:hidden和text-overflow：ellipsis無法生效?。ㄔ趩涡形谋疽绯鍪÷赃@一案例中）

 

從單行文本溢出省略到多行文本溢出省略

許多同學(xué)可能會這樣想：怎么實現(xiàn)多行文本省略呢？不是只要把white-space:nowrap去掉就可以了嗎？( _(:3 」∠)_ 要是這么簡單就好了...)

實踐出真知，讓我們來試一下，去掉CSS樣式中的white-space:nowrap，demo：


移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

這次，沒能隱藏成功，那如果我們overflow:hidden是設(shè)在父級元素div中呢？得到demo:

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn) 

隱藏成功了，可你仍然看不到你想看到的那三個點

 

妥妥地失敗了，嗯，沒錯,所以對于多行文本溢出的省略我們需要另辟蹊徑了

 

多行文本溢出的省略（...）方案一 ---簡單方便的解決方案

 

我們可以借助webkit的CSS擴展屬性實現(xiàn)這一點：

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

<div style = 'width:400px;
              height:70px;
              border:1px solid red;'>
           <p style='display:
                     -webkit-box;//對象作為彈性伸縮盒子模型顯示 
                     -webkit-box-orient: vertical;//設(shè)置或檢索伸縮盒對象的子元素的排列方式 
                     -webkit-line-clamp: 2;//溢出省略的界限
                     overflow:hidden;//設(shè)置隱藏溢出元素'>
                 這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本         </p>
</div>

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

demo:

 

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

【注意】

1四行CSS缺一不可！

2因為這是webkit的CSS屬性擴展，所以兼容瀏覽器范圍是PC端的webkit內(nèi)核的瀏覽器：chrome/safari/QQ瀏覽器/360/獵豹等以及絕大多數(shù)的移動端瀏覽器

 

多行文本溢出的省略（...）方案二 ---簡單粗暴的解決方案

 

方案一固然最為簡單，但其還存在著跨瀏覽器兼容的問題，于是人民群眾們提出了一種簡單粗暴的方式去實現(xiàn)通用的解決方案：給div固定高和寬，同時采用相對定位，與此同時對在div內(nèi)放一個<p>...</p>對其使用絕對定位，定在右下角，同時設(shè)其背景顏色為白色就可以了：

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

<div style = 'position:relative;
                    width:400px;
                    height:45px;
                    border:1px solid red;
                    overflow:hidden;                     '>這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本<p style = 'position:absolute;right:0;bottom:6px;margin:0;background:white'>...</p>
</div>

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

demo:

 

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

但方案二也有一些問題

1在文本沒有溢出父級元素時也同樣顯示省略號：

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

2末尾處文本可能有被“裁剪”的副效果：

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn) 

多行文本溢出的省略（...）方案三 --簡潔優(yōu)雅的解決方案

 

那么有沒有更加優(yōu)雅的解決方案，在沒有溢出的時候不顯示省略號（...），在溢出的時候隱藏并顯示省略號呢？答案是有的！先看看我們最終實現(xiàn)的demo:

 

在文本沒有溢出父級元素時：

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

文本溢出父級元素時：

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn) 

下面是HTML和JS代碼：

<div id='view' style='border:1px solid red;width:200px;height:70px;overflow:auto'></div>

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 s = '這是一個文本這是一個文本這是一個文本這是一個文本這是一個文本這是一個文本'el = document.getElementById('view');
n = el.offsetHeight;for(i=0; i<s.length; i++) {
          el.innerHTML = s.substr(0, i);          if(n < el.scrollHeight) {
             el.style.overflow = 'hidden';
             el.innerHTML = s.substr(0, i-3) + '...';             break;
             }
}

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

首先我們需要弄清楚offsetHeight和scrollHeight所表示的高度：

 

1溢出顯示滾動條時：

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

2沒有溢出時：

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

el = document.getElementById('view'); n = el.offsetHeight;表示的是取到當前包裹文本的父級元素的高度， el.innerHTML = s.substr(0, i);表示在for循環(huán)中取出長度遞增的文段， '這'--> '這是' --> '這是一'，當n < el.scrollHeight也就是 當前文本高度<滾動條內(nèi)的內(nèi)容的高度，代表著剛好達到溢出的界限，此時執(zhí)行if內(nèi)的語句el.style.overflow = 'hidden';el.innerHTML = s.substr(0, i-3) + '...'; break;將父級元素view的overflow設(shè)置為hidden，并且將末尾的三個文字用...取代，同時跳出for循環(huán)

http://www.cnblogs.com/penghuwan/p/6682303.html