如何在可調整大小的文字元素中實現省略號截斷？

文字調整大小中的省略號截斷

在內容中間用省略號（「...」）截斷文字可以增強可讀性UI 元素具有可變寬度。實現此效果提出了一個挑戰，即當文字完整顯示時省略號應該消失。

要在可調整大小的元素中實作省略號：

1. 使用自訂資料屬性：

   • 在HTML 中，將全文指派給自訂資料屬性：

2. 設定事件監聽器：

   • 新增載入與調整大小事件監聽器，觸發JavaScript 函數來填入

3. 省略號函數：

   • 省略號函數：

     <code class="javascript">function start_and_end(str) {
       if (str.length > 35) {
         return str.substr(0, 20) + '...' + str.substr(str.length-10, str.length);
       }
       return str;
     }</code>

   • 定義一個用於截斷文字的JavaScript 函數（例如「start_and_end」）：
4. 根據不同物件和字體的需要調整值（例如35、20、10）。
   • 動態內插：
5. 考慮使用動態內插值，根據字體大小和元素寬度決定要顯示的適當字元數.
   • 工具提示輔助功能：

在省略號中加入縮寫標籤，以便在下列情況下啟用包含全文的工具提示：

透過實施這些步驟，您可以有效地截斷文本元素中間帶有省略號的文本，確保當元素完全拉伸時省略號消失文本的寬度。

以上是如何在可調整大小的文字元素中實現省略號截斷？的詳細內容。更多資訊請關注PHP中文網其他相關文章！