文本长短切换跨元素点击失效问题排查与修复咨询

Root Cause of the Issue #

Your code runs into problems when switching modes across different elements because of explicit inline height styles that aren't cleared when switching back to short mode:

1. When expanding to long mode: You set shorter elements to match the tallest element's height using an inline height style. This overrides the element's natural content height.
2. When collapsing to short mode:
   • You don't remove this explicit height style first. So even after setting -webkit-line-clamp:1, the element remains at the tall height from the expand phase.
   • You calculate the target height based on the clicked element (which still has the explicit tall height), then apply that tall height to all elements—keeping them from shrinking back to the one-line height.

This mismatch between the -webkit-line-clamp setting and the fixed height prevents proper text truncation.

Fixed Code #

Here's the revised code that addresses these issues:

$(document).on("click", ".elementText", function (e) {
  const $container = $(this).parent();
  const $allElements = $container.find(".elementText");
  
  // Check current mode using the first element (ensures consistency across all items)
  const isShortMode = $allElements.first().css("-webkit-line-clamp") === "1";
  
  if (isShortMode) {
    // Switch to long mode
    // First reset all elements to full line-clamp and remove explicit height
    $allElements.css({
      "-webkit-line-clamp": "99",
      "height": "" // Clear inline height to get natural full height
    });
    
    // Find the tallest element's natural height
    let maxHeight = 0;
    $allElements.each(function() {
      const currentHeight = $(this).height();
      if (currentHeight > maxHeight) {
        maxHeight = currentHeight;
      }
    });
    
    // Set all elements to the tallest height
    $allElements.height(maxHeight);
  } else {
    // Switch to short mode
    // Reset line-clamp to 1 and remove explicit height to let elements shrink naturally
    $allElements.css({
      "-webkit-line-clamp": "1",
      "height": "" // Clear inline height to revert to one-line natural height
    });
  }
});

.elementText {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  cursor: pointer;
  padding-left: 5px;
  width: 200px;
  background: yellow;
  float: left;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementText">Contrary to popular belief, Lorem Ipsum is not simply random text</div>
<div class="elementText">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
<div class="elementText">The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</div>

Key Improvements #

1. Clear Explicit Height: Whenever switching modes, we remove the inline height style. This lets elements revert to their natural content height based on the -webkit-line-clamp setting.
2. Consistent Mode Check: We use the first element's state to determine the current mode, ensuring all elements stay in sync (per your requirement that all entries must always use the same display version).
3. Proper Height Calculation: For long mode, we first reset all elements to their full natural height before finding the tallest one, then apply that height to all elements.
4. Simplified Short Mode: For short mode, we just reset the line-clamp and clear the height—elements automatically shrink to their one-line natural height with proper ellipsis.

This fixes the cross-element click issue because we're always resetting all elements' styles consistently, regardless of which element is clicked.

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