如何实现abbr标签仅对ellipsed文本生效

Alright, let's figure out how to make that <abbr> tooltip only activate when your text gets truncated (ellipsed) inside the .ellip container. Here's a practical, step-by-step solution:

First, let's recap your existing code #

CSS:

.ellip { 
  width: 300px; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
  overflow: hidden; 
}
abbr[title] { 
  border-bottom: none !important; 
  cursor: inherit !important; 
  text-decoration: none !important; 
}

HTML:

<div class="ellip"> 
  <input type='checkbox' value='"+a.a+"' name='radio' title='"+a.b+"' class='"+a.c+"'>
  <span id='"+a.b+"'><abbr title='"+a.a+"'>"+a.a+"</abbr></span>
  <i class='fa fa-pencil' aria-hidden='true' ></i> 
</div>

The core problem #

Pure CSS can't detect if text has overflowed its container. We need a little JavaScript to check for truncation, then toggle the <abbr>'s tooltip behavior accordingly.

Step-by-step implementation #

1. Add helper CSS (optional but useful)

This lets you visually distinguish when the tooltip is active, and disable interactions when it's not:

/* Disable tooltip behavior when text isn't ellipsed */
.ellip:not(.is-ellipsed) abbr[title] {
  pointer-events: none; /* Block mouse hover from triggering the tooltip */
}

/* Optional: Restore visual cue when tooltip is active */
.ellip.is-ellipsed abbr[title] {
  border-bottom: 1px dotted #000 !important;
  cursor: help !important;
}

2. Write the JavaScript logic

We'll check each .ellip container to see if its content overflows, then update the <abbr> accordingly:

function checkForEllipsis() {
  // Loop through all your truncation containers
  document.querySelectorAll('.ellip').forEach(container => {
    // Check if content is wider than the container (truncated)
    const isTextEllipsed = container.scrollWidth > container.clientWidth;
    
    // Toggle a class to mark the state
    container.classList.toggle('is-ellipsed', isTextEllipsed);

    // Alternatively: Directly control the abbr's title attribute
    const abbrElement = container.querySelector('abbr[title]');
    if (abbrElement) {
      if (!isTextEllipsed) {
        // Save the original title before removing it
        abbrElement.dataset.originalTitle = abbrElement.title;
        abbrElement.removeAttribute('title');
      } else {
        // Restore the original title when truncated
        abbrElement.title = abbrElement.dataset.originalTitle || abbrElement.title;
      }
    }
  });
}

// Run on page load
document.addEventListener('DOMContentLoaded', checkForEllipsis);

// Re-check if the window resizes (container width might change)
window.addEventListener('resize', checkForEllipsis);

Key notes #

• If your .ellip has complex content (like floating elements), target the inner <span> instead of the container for overflow checks:

  const contentSpan = container.querySelector('#' + a.b);
  const isTextEllipsed = contentSpan.scrollWidth > contentSpan.clientWidth;
  

• If you're dynamically adding .ellip elements (via JS or backend rendering), call checkForEllipsis() right after the elements are added to ensure they're processed.

内容的提问来源于stack exchange，提问作者Lmnop