如何使用文字溢出防止斷字

Question

我正在嘗試為某些標題設定最大行數，但問題是有時一行會以斷詞結尾。我需要的是，如果一個單字必須被打破，它應該被完全隱藏，並且省略號放在前一個單字之後。此程式碼顯示了問題：#head{width:300px;font-size:20px;display:-webkit-box!important;color:#000000!important;text-overflow:ellipsis!importa

P粉231112437 · Answer

要達到完全隱藏斷詞並將省略號放在前一個字後面的效果，您可以使用 JavaScript 來操作文字內容。以下是如何修改程式碼以實現此目的的範例：

function truncateText(element, maxLength) {
  const text = element.innerText;
  if (text.length <= maxLength) return;

  const truncatedText = text.slice(0, maxLength);
  const lastSpaceIndex = truncatedText.lastIndexOf(' ');

  element.innerText = truncatedText.slice(0, lastSpaceIndex) + '...';
}

const headlineElement = document.getElementById('headline');
truncateText(headlineElement, 100);

#head {
  width: 300px;
  font-size: 20px;
  display: -webkit-box !important;
  color: #000000 !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}


  
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a

在此程式碼中，JavaScript 函數 truncateText 用於在文字內容超過指定的最大長度時截斷文字內容。此函數會尋找最大長度內的最後一個空格字符，並用省略號取代剩餘的文字。

在新增省略號之前，您可以將 maxLength 參數調整為所需的字元數。

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學