顯示省略號截斷文字的工具提示
處理可能溢位其指定顯示區域的動態頁面元素時，新增工具提示以提供上下文變得至關重要。在這種情況下，最好僅在省略號 (...) 表示內容被截斷時才顯示工具提示。
考慮以下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中文網其他相關文章！
