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

文字中的省略號：實作Mac 風格

挑戰：

挑戰：

挑戰：

1. 實現省略號( ...") 位於可調整大小的元素內的文字中間。當元素寬度與全文寬度相符時，省略號應該會消失。

   解決方案：

   <span data-original="your string here"></span>

2. 向HTML 新增資料屬性：

   向HTML 新增資料屬性：
   在HTML 中，在自訂data-* 屬性中包含完整文字值，例如：
JavaScript 事件偵聽器：

3. 為元素的載入和調整大小事件新增事件監聽器。這些監聽器應該觸發一個JavaScript 函數，該函數將：

   從data-* 屬性檢索原始文字

   <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>

   將文字放入span 元素的innerHTML

4. 省略號函數：

   建立一個省略號函數，在文字超過一定長度時修剪文字。例如：

   <code class="html"><abbr title="full string">...</abbr></code>

依需求自訂文字長度和位置值。

全文工具提示：為了增加可訪問性，請考慮在省略號上添加縮寫標籤，並帶有顯示全文的工具提示：

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