多行截断文本末尾添加Read more静态超链接的CSS样式实现需求

Got it, let's fix this so your "Read more" link sits neatly at the end of the third line when text overflows, and behaves normally when it doesn't. The issue with your current setup is that the line-clamp applies to the entire container, which pushes the link down or cuts it off. We need to detect when text overflows and adjust the layout dynamically.

Here's a reliable solution using a bit of JavaScript to handle overflow detection, plus CSS for styling:

Step 1: Update Your HTML #

Keep your structure simple, just make sure the text and link are siblings inside the card container:

<div class="card_short">
  <span class="card_def">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
  <a href="#" class="card_readmore">Read more</a>
</div>

<div class="card_short">
  <span class="card_def">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum... There is no overflow here.</span>
  <a href="#" class="card_readmore">Read more</a>
</div>

Step 2: Add CSS Styling #

This sets up the base layout, handles spacing, and styles the overflow state:

.card_short {
  max-width: 603px;
  font-size: 16px;
  line-height: 21.67px; /* Matches your 65px max height for 3 lines */
  max-height: 65px;
  overflow: hidden;
  position: relative;
  margin-bottom: 2rem;
}

.card_def {
  display: inline;
}

.card_readmore {
  color: #0057b3;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 4px;
}

/* Styles for overflowing cards */
.card_short.overflowing .card_def::after {
  content: "...";
  margin-right: 4px;
}

.card_short.overflowing .card_readmore {
  position: absolute;
  bottom: 0;
  right: 0;
  background: white; /* Match your background color here */
  padding-left: 8px;
}

Step 3: Add JavaScript to Detect Overflow #

This script checks if each card's text exceeds the 3-line limit, then adds a class to adjust the layout:

document.addEventListener('DOMContentLoaded', function() {
  const cardContainers = document.querySelectorAll('.card_short');
  
  cardContainers.forEach(card => {
    // Check if the content overflows the card's max height
    if (card.scrollHeight > card.clientHeight) {
      card.classList.add('overflowing');
      
      // Calculate how much space we need to leave for the "Read more" link
      const readMoreLink = card.querySelector('.card_readmore');
      const tempLink = readMoreLink.cloneNode(true);
      tempLink.style.visibility = 'hidden';
      tempLink.style.position = 'absolute';
      document.body.appendChild(tempLink);
      const linkWidth = tempLink.offsetWidth;
      document.body.removeChild(tempLink);
      
      // Truncate the text to fit in 3 lines minus the link's width
      const textElement = card.querySelector('.card_def');
      let fullText = textElement.textContent;
      let truncatedText = fullText;
      
      // Use a temporary element to measure text width
      const tempSpan = document.createElement('span');
      tempSpan.style.visibility = 'hidden';
      tempSpan.style.position = 'absolute';
      tempSpan.style.fontSize = '16px';
      document.body.appendChild(tempSpan);
      
      // Binary search to find the longest text that fits
      let left = 0;
      let right = fullText.length;
      let bestLength = fullText.length;
      
      while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        tempSpan.textContent = fullText.substring(0, mid);
        
        if (tempSpan.offsetHeight <= card.clientHeight && tempSpan.offsetWidth <= (card.offsetWidth - linkWidth - 20)) {
          bestLength = mid;
          left = mid + 1;
        } else {
          right = mid - 1;
        }
      }
      
      textElement.textContent = fullText.substring(0, bestLength);
      document.body.removeChild(tempSpan);
    }
  });
});

How This Works: #

1. Overflow Detection: The script checks if the card's scroll height is larger than its visible height (meaning text overflows).
2. Dynamic Truncation: It calculates the width of the "Read more" link, then truncates the main text so it fits in 3 lines with enough space left for the link and ellipsis.
3. Styling Adjustments: When overflow is detected, the overflowing class is added, which positions the link at the end of the third line and adds an ellipsis after the truncated text.

This solution ensures that:

• Short text shows the full content plus "Read more" at the end.
• Long text gets truncated to exactly 3 lines, with "... Read more" neatly aligned at the end of the third line.

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