首頁 > web前端 > css教學 > HTML 中如何僅在文字省略時顯示工具提示?

HTML 中如何僅在文字省略時顯示工具提示?

Susan Sarandon
發布: 2024-11-05 21:06:03
原創
412 人瀏覽過

How to Display Tooltips Only When Text is Ellipsized in HTML?

僅在啟動省略號時顯示工具提示

在 HTML 中,當文字超過指定寬度時,它會被省略號(「...」)截斷。這可以使用設定為省略號的文字溢出屬性來實現。但是,它缺乏瀏覽器支援來偵測何時套用省略號。

使用JavaScript 進行自訂事件處理

要模擬此行為並僅在存在省略號時顯示工具提示,請執行以下操作JavaScript 方法:

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

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

此程式碼將mouseenter 事件綁定到可能溢出的元素。它檢查元素的可見寬度 (offsetWidth) 是否小於其實際內容寬度 (scrollWidth),以及它是否沒有 title 屬性。如果滿足這些條件,它會將 title 屬性設定為元素的文字內容。

此技術可讓您僅在啟動省略號時顯示工具提示,而不依賴特定的瀏覽器事件。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板