這篇文章主要介紹“css怎么實(shí)現(xiàn)多行超出省略號(hào)效果”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css怎么實(shí)現(xiàn)多行超出省略號(hào)效果”文章能幫助大家解決問(wèn)題。

成都創(chuàng)新互聯(lián)公司-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比牙克石網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式牙克石網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋牙克石地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴(lài)。

方法一：?jiǎn)涡芯又惺÷蕴?hào)

這種方法最簡(jiǎn)單，適用于只有一行文本內(nèi)容。我們可以通過(guò)以下兩行CSS代碼實(shí)現(xiàn)：

overflow: hidden;
text-overflow: ellipsis;

overflow為隱藏超過(guò)寬度限制的文本，text-overflow為超出后的表現(xiàn)方式，這里使用的是省略號(hào)。然而，這兩行代碼有一個(gè)限制，只適用于單行省略。如果文本有多個(gè)行，我們需要使用其他方法。

方法二：多行兩端對(duì)齊省略號(hào)

這個(gè)方法允許多行文本，并且每行文本最后一個(gè)單詞的末尾處出現(xiàn)省略號(hào)。這里的關(guān)鍵在于使用display: -webkit-box;來(lái)將文本容器轉(zhuǎn)換成一個(gè)伸縮盒子：

.box {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; // 限制顯示的行數(shù)
}

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

這種方法的缺點(diǎn)是只有支持Webkit內(nèi)核的瀏覽器才能使用，所以在兼容性方面需要特別注意。

方法三：多行省略號(hào)+鼠標(biāo)懸浮顯示全文

這種方法類(lèi)似于“閱讀全文”按鈕，當(dāng)用戶(hù)將鼠標(biāo)指針懸停在文本上時(shí)，全文才會(huì)顯示。首先，我們需要將文本限定在容器的高度范圍內(nèi)，超出的文本被隱藏。然后，我們可以通過(guò)JavaScript的mouseenter和mouseleave事件來(lái)控制文本的顯示和隱藏。

對(duì)于CSS部分，我們可以通過(guò)以下代碼來(lái)實(shí)現(xiàn)：

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3; //限定顯示行數(shù)
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.show-text {
  display: block;
  cursor: pointer;
}

用js實(shí)現(xiàn)事件的綁定及文本的顯示與隱藏：

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

這種方法可以更好地控制文本的顯示和隱藏，提升用戶(hù)的體驗(yàn)，但是需要耗費(fèi)更多的編碼時(shí)間和動(dòng)態(tài)效果實(shí)現(xiàn)。

方法四：使用Vue.js中的過(guò)濾器

Vue.js是一種前端框架，可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定和頁(yè)面的動(dòng)態(tài)響應(yīng)。在Vue.js中，我們可以通過(guò)過(guò)濾器實(shí)現(xiàn)多行省略號(hào)的效果。如下代碼所示：

其中，v-html指令用于渲染文本內(nèi)容，pipeline符號(hào)“|”用于協(xié)調(diào)過(guò)濾器和表達(dá)式。過(guò)濾器可以在Vue.js實(shí)例中定義，如下所示：

Vue.filter('multilineEllipsis', function(text, lines) {
  var stopwords = ['the', 'in', 'on', 'at', 'is', 'are', 'to', 'and'];
  var reg = new RegExp(`(?:(?<=(^|(.{2,}?\W)))[${stopwords.join('')}])?(?(.|\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;
});

這個(gè)過(guò)濾器比較復(fù)雜，他會(huì)在文本中進(jìn)行正則匹配，將每行符合要求的文本轉(zhuǎn)換為對(duì)應(yīng)的HTML，并保留省略號(hào)。這個(gè)過(guò)濾器還會(huì)你參照了常見(jiàn)英文單詞的列表來(lái)制定正則表達(dá)式，提高了文本顯示的質(zhì)量。

關(guān)于“css怎么實(shí)現(xiàn)多行超出省略號(hào)效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。