【CSS/JS學習】如何?單行／多行文本溢出的省略（...）--老司機繞過坑道的正確姿勢

標籤：注意   效果   案例   absolute   對象   這一   區分   offset   ati   

引言：寫前端UI的朋友們也許都遇到過這樣的問題：我們需要實現這樣一個需求，在一個父級元素中隱藏一個可能過長的文本： 這個文本可能是單行的： 也可能是多行的： 下面我就給大家展示如何簡單或優雅地實現這種需求  單行文本溢出的省略 先上代碼

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

demo:

  關於overflow: hidden這裡我們需要注意到一點：這裡的overflow並不是設定為父級元素div的屬性，而是p標籤的屬性，需要和overflow的普通用法區分開來1overflow：hidden的普通用法：用在區塊層級元素（例如div）的外層隱藏內部溢出元素2overflow: hidden的特殊用法：在上述例子中配合text-overflow: ellipsis;white-space: nowrap;實現p元素隱藏自身的溢出並設定（...）的效果  關於text-overflow: ellipsis;這一屬性依賴於overflow: hidden存在，只有設定了overflow:hidden它才是能夠生效的，你可以把它看作overflow對於文本溢出隱藏的一種‘特殊樣式’  關於white-space: nowrap它的作用是讓文本不換行，這是overflow:hidden和text-overflow：ellipsis生效的基礎！沒有它overflow:hidden和text-overflow：ellipsis無法生效！（在單行文本溢出省略這一案例中）  從單行文本溢出省略到多行文本溢出省略許多同學可能會這樣想：怎麼實現多行文本省略呢？不是只要把white-space:nowrap去掉就可以了嗎？( _(:3 」∠)_ 要是這麼簡單就好了...)實踐出真知，讓我們來試一下，去掉CSS樣式中的white-space:nowrap，demo：

這次，沒能隱藏成功，那如果我們overflow:hidden是設在父級元素div中呢？得到demo: 隱藏成功了，可你仍然看不到你想看到的那三個點 妥妥地失敗了，嗯，沒錯,所以對於多行文本溢出的省略我們需要另闢蹊徑了  多行文本溢出的省略（...）方案一 ---簡單方便的解決方案 我們可以藉助webkit的CSS擴充屬性實現這一點：

<div style = ‘width:400px;              height:70px;              border:1px solid red;‘>           <p style=‘display:                     -webkit-box;//對象作為Auto Scaling盒子模型顯示                      -webkit-box-orient: vertical;//設定或檢索伸縮盒對象的子項目的相片順序                      -webkit-line-clamp: 2;//溢出省略的界限                     overflow:hidden;//設定隱藏溢出元素‘>                 這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本         </p></div>

 demo:  【注意】1四行CSS缺一不可！2因為這是webkit的CSS屬性擴充，所以相容瀏覽器範圍是PC端的webkit核心的瀏覽器：chrome/safari/QQ瀏覽器/360/獵豹等以及絕大多數的移動端瀏覽器  多行文本溢出的省略（...）方案二 ---簡單粗暴的解決方案 方案一固然最為簡單，但其還存在著跨瀏覽器安全色的問題，於是人民群眾們提出了一種簡單粗暴的方式去實現通用的解決方案：給div固定高和寬，同時採用相對定位，與此同時對在div內放一個<p>...</p>對其使用絕對位置，定在右下角，同時設其背景顏色為白色就可以了：

<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>

demo:

 但方案二也有一些問題1在文本沒有溢出父級元素時也同樣顯示省略符號：2末尾處文本可能有被“裁剪”的副效果：  多行文本溢出的省略（...）方案三 --簡潔優雅的解決方案 那麼有沒有更加優雅的解決方案，在沒有溢出的時候不顯示省略符號（...），在溢出的時候隱藏並顯示省略符號呢？答案是有的！先看看我們最終實現的demo: 在文本沒有溢出父級元素時： 文本溢出父級元素時： 下面是HTML和JS代碼：

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

 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;             }}

 首先我們需要弄清楚offsetHeight和scrollHeight所表示的高度： 1溢出顯示捲軸時： 2沒有溢出時： el = document.getElementById(‘view‘); n = el.offsetHeight;表示的是取到當前包裹文本的父級元素的高度， el.innerHTML = s.substr(0, i);表示在for迴圈中取出長度遞增的文段， ‘這‘--> ‘這是‘ --> ‘這是一‘，當n < el.scrollHeight也就是 當前文本高度<捲軸內的內容的高度，代表著剛好達到溢出的界限，此時執行if內的語句el.style.overflow = ‘hidden‘;el.innerHTML = s.substr(0, i-3) + ‘...‘; break;將父級元素view的overflow設定為hidden，並且將末尾的三個文字用...取代，同時跳出for迴圈 perfect!這樣我們就實現了優雅的解決方案

【CSS/JS學習】如何?單行／多行文本溢出的省略（...）--老司機繞過坑道的正確姿勢