css怎么實現多行超出省略號效果

這篇文章主要介紹“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怎么實現多行超出省略號效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。