【css/js]文本溢出解決方法

【目錄】

• 單行文本溢出的省略
• 從單行文本溢出省略到多行文本溢出省略
  • 多行文本溢出的省略（...）方案一 ---簡單方便的解決方案
  • 多行文本溢出的省略（...）方案二 ---簡單粗暴的解決方案
  • 多行文本溢出的省略（...）方案三 --簡潔優雅的解決方案

 

【正文】

寫前端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;//對象做爲彈性伸縮盒子模型顯示 
                     -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!這樣咱們就實現了優雅的解決方案

 

【完】--喜歡這篇文章的話不妨關注一下我喲