如何僅在文字被省略號截斷時顯示工具提示？

顯示省略號截斷文字的工具提示

處理可能溢位其指定顯示區域的動態頁面元素時，新增工具提示以提供上下文變得至關重要。在這種情況下，最好僅在省略號 (...) 表示內容被截斷時才顯示工具提示。

考慮以下HTML 標記：

<code class="html"><span id="myId" class="my-class">...</span></code>

使用CSS 樣式來啟用寬內容的省略號：

<code class="css">.my-class {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}</code>

要將工具提示，我們可以利用此元素新增工具提示，我們可以利用jQuery 的mouseenter 事件來檢查元素的寬度是否小於其滾動寬度，表示內容被截斷。然後我們才設定title 屬性，確保觸發省略號時出現工具提示：

<code class="javascript">$('.mightOverflow').bind('mouseenter', function(){
    var $this = $(this);

    if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
        $this.attr('title', $this.text());
    }
});</code>

透過實作此解決方案，只有在內容溢出且省略號啟動時才會顯示工具提示，為使用者在不需要時不會弄亂介面。

以上是如何僅在文字被省略號截斷時顯示工具提示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！