如何讓多行文本顯示省略號

一、使用CSS的text-overflow屬性實現省略號

在<style>標籤內，添加text-overflow屬性，設置overflow為hidden，同時設置white-space為nowrap，即可實現多行文本省略號的效果。

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

在HTML中，給需要加省略號的文本元素添加class=”ellipsis”即可。

二、使用JavaScript計算文本寬度實現省略號

如果要求實現更精確的省略號效果，可以使用JavaScript計算文本的寬度，根據寬度來截取文本並添加省略號。

首先，HTML結構如下：

<div id="ellipsis">
    <span id="text">這是一段要進行省略號處理的文本</span>
</div>

然後，在JavaScript中，計算文本的寬度，截取文本並添加省略號：

const ellipsis = document.getElementById('ellipsis');
const text = document.getElementById('text');
const textWidth = text.clientWidth;
const ellipsisWidth = ellipsis.clientWidth;

if (textWidth > ellipsisWidth) {
   const textContent = text.textContent;
   let newText = '';
   for (let i = 0; i < textContent.length; i++) {
       newText += textContent[i];
       if ((text.cloneNode(true)).textContent !== newText) {
           text.textContent = newText + '...';
           break;
       }
   }
}

三、更多技巧

1、使用CSS3的line-clamp屬性可以更方便地實現多行文本省略號效果。例如：

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

這裡設置了-webkit-line-clamp為3，即最多顯示3行文本，超過3行則自動省略號。

2、可以根據不同的需求，定製化省略號的樣式，例如顏色、字號、背景色等。需要注意的是，如果在:before或:after偽元素中添加省略號，需要注意偽元素的content屬性值是否為字符串，否則需要使用attr()函數來獲取元素的屬性值，例如：

.ellipsis:before {
    content: "\2026";  /*省略號字符*/
    color: red;
}

四、總結

通過使用CSS和JavaScript，我們可以方便地實現多行文本省略號效果。在實際項目中，我們需要根據具體的需求和效果要求來選擇使用哪種方法，以最佳的用戶體驗和代碼效率為目標。