css多行超出省略號

在網頁設計中，經常需要用到多行文字的展示，但是當文字內容過長時，它會超出預設的寬度限制，導致佈局混亂。為了避免這種情況，我們需要將多餘的文字省略，顯示出省略號，以增加整體的美觀和使用者體驗。事實上，採用CSS樣式來實現這一效果非常簡單，接下來我們將介紹常用的幾種方法。

方法一：單行居中省略號

這種方法最簡單，適用於只有一行文字內容。我們可以透過以下兩行CSS程式碼實現：

overflow: hidden;
text-overflow: ellipsis; 

overflow為隱藏超過寬度限制的文本，text-overflow為超出後的表現方式，這裡使用的是省略號。然而，這兩行程式碼有一個限制，只適用於單行省略。如果文字有多個行，我們需要使用其他方法。

方法二：多行兩端對齊省略號

這個方法允許多行文本，並且每行文本最後一個單字的末尾處出現省略號。這裡的關鍵在於使用display: -webkit-box;來將文字容器轉換成一個伸縮盒子：

.box {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; // 限制显示的行数
}

其中，-webkit-line-clamp表示限定文字顯示的最大行數。如果想要顯示更多行，只要把數字改大即可。

這種方法的缺點是只有支援Webkit核心的瀏覽器才能使用，所以在相容性方面需要特別注意。

方法三：多行省略號 滑鼠懸浮顯示全文

這種方法類似「閱讀全文」按鈕，當使用者將滑鼠指標停留在文字上時，全文才會顯示。首先，我們需要將文字限定在容器的高度範圍內，超出的文字被隱藏。然後，我們可以透過JavaScript的mouseenter和mouseleave事件來控製文字的顯示和隱藏。

對於CSS部分，我們可以透過以下程式碼來實作：

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3; //限定显示行数
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.show-text {
  display: block;
  cursor: pointer;
}

用js實作事件的綁定及文字的顯示與隱藏：

var text = document.querySelector('.text');
var textHeight = window.getComputedStyle(text).height;

if(parseInt(textHeight) < text.scrollHeight) {
  text.classList.add('show-text');
  text.addEventListener('mouseenter', function() {
    text.classList.remove('text');
  });
  text.addEventListener('mouseleave', function() {
    text.classList.add('text');
  });
}

這種方法可以更好地控製文字的顯示和隱藏，提升使用者的體驗，但是需要耗費更多的編碼時間和動態效果實現。

方法四：使用Vue.js中的篩選器

Vue.js是一種前端框架，可以實現資料的雙向綁定和頁面的動態回應。在Vue.js中，我們可以透過濾鏡實現多行省略號的效果。如下程式碼所示：

<p v-html="text | multilineEllipsis(3)"></p>

其中，v-html指令用於渲染文字內容，pipeline符號「|」用於協調過濾器和表達式。過濾器可以在Vue.js實例中定義，如下所示：

Vue.filter('multilineEllipsis', function(text, lines) {
  var stopwords = ['the', 'in', 'on', 'at', 'is', 'are', 'to', 'and'];
  var reg = new RegExp(`(?:(?<=(^|(.{2,}?\W)))[${stopwords.join('')}])?(?<line>(.|\n){1,20}(?=(.|\n){0,20}[\W]$))`, 'g');
  var len = 0;
  var result = '';
  var lineCount = 0;

  while(len <= text.length && lineCount < lines) {
    var match = reg.exec(text.slice(len));
    if(match && match.groups.line) {
      result += match.groups.line;
      len += match[0].length;
    } else {
      break;
    }

    if(len < text.length) {
      var nextchar = text[len];
      if(nextchar !== ' ' && nextchar !== '
' && nextchar !== '') {
        result += '...';
        break;
      }
    }
    lineCount++;
  }

  if(len < text.length) {
    result += '...';
  }

  return result;
});

這個過濾器比較複雜，他會在文本中進行正則匹配，將每行符合要求的文本轉換為對應的HTML，並保留省略號。這個過濾器還會你參考了常見英文單字的清單來制定正規表示式，提高了文字顯示的品質。

結尾

以上就是實作CSS多行省略號的幾種方法，開發者可根據具體需求來選擇合適的方法。其中，使用Vue.js過濾器的實作比較新穎且流行，有越來越多的開發者採用。不管採用哪種方法，都要注意相容性以及動態響應性，在給用戶最好體驗的前提下加強網站的整體美觀性。

以上是css多行超出省略號的詳細內容。更多資訊請關注PHP中文網其他相關文章！