HTML에서 줄임표가 활성화된 경우에만 도구 설명을 표시하려면 어떻게 해야 합니까?

도구 설명 표시를 위한 줄임표 활성화 결정

HTML에서 내용이 요소의 지정된 너비를 초과하는 경우 줄임표(...)를 사용할 수 있습니다. 자동으로 적용되며, 잘리고 세 개의 점으로 대체되는 오버플로 텍스트로 표시됩니다. 이 문서에서는 줄임표가 활성화된 경우에만 도구 설명을 표시하는 방법을 살펴봅니다.

배경

다음 HTML 스니펫을 고려하세요.

<code class="html"><p>I have got a span with dynamic data in my page, with ellipsis style.</p>

<pre class="brush:php;toolbar:false">.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}

<span id="myId" class="my-class"></span>

document.getElementById('myId').innerText = "...";

이 예에서 "myId" 범위 내의 콘텐츠는 다음과 같습니다. 동적으로 업데이트되며 내용이 지정된 너비를 넘으면 줄임표 스타일이 활성화됩니다.

도구 설명 추가

이 요소에 도구 설명을 추가하려면 " title" 속성:

<code class="html"><span id="myId" class="my-class" title="Full Content"></span></code>

도구 설명만 표시되도록 설정 줄임표

그러나 우리는 줄임표를 활성화할 수 있을 만큼 내용이 긴 경우에만 툴팁이 나타나기를 원합니다. 이를 달성하기 위해 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>

이 JavaScript 코드에서는 요소의 오프셋 너비가 스크롤 너비보다 작은지 확인합니다. , 콘텐츠가 오버플로되었음을 나타냅니다. "제목" 속성이 아직 설정되지 않은 경우 요소의 전체 텍스트를 도구 설명으로 추가합니다. 이렇게 하면 줄임표가 활성화된 경우에만 툴팁이 표시됩니다.

위 내용은 HTML에서 줄임표가 활성화된 경우에만 도구 설명을 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!