为截断文本显示Read More链接的布局问题求助

问题描述 #

我有8个class为bios_ellipsis的div，以及8个class为read_more的链接。当浏览器窗口缩小、clientWidth变小时，我使用以下CSS实现文本截断：

.bios_ellipsis {
  vertical-align: middle!important;
  overflow: hidden!important;
  text-overflow: ellipsis!important;
  display: -webkit-box!important;
  -webkit-line-clamp: 5!important; 
  line-clamp: 5!important;
  -webkit-box-orient: vertical!important;
  display: -moz-box;
}

我希望每个bios_ellipsis div都显示对应的read_more链接，且每个链接指向不同URL，但下方的JS代码存在问题——read_more链接最终出现在div上方的不同位置，布局杂乱无章。

原JS代码：

$(document).ready(function(){
    
  var getElements = document.querySelectorAll('.bios_ellipsis');
  
  Array.from(getElements).forEach(function(element) {
    var pos = $('.bios_ellipsis').offset();
    if ( element.clientWidth <= 600 ) {

      for(var i = 0; i < getElements.length; i++){
        var top = pos.top[i] + '100px';
        var left = pos.left[i] + '500px';

        $('.read_more').css({
          position:'absolute',
          top:top[i],
          left:left[i]
        });

      }}
  });
});

问题分析 #

1. 位置获取错误：$('.bios_ellipsis').offset()仅返回第一个匹配元素的位置，并非数组，pos.top[i]会得到无效值，导致位置计算完全错误。
2. 批量操作覆盖：嵌套循环中每次遍历都修改所有.read_more的样式，链接位置被反复覆盖，最终布局混乱。
3. 无对应关联：没有建立每个bios_ellipsis和对应read_more的一对一关系，所有链接被统一设置位置。
4. 未监听窗口变化：窗口大小改变时不会重新计算位置，无法响应实时布局调整。

解决方案 #

1. 调整DOM结构（推荐） #

让每个read_more与对应bios_ellipsis同属一个容器，方便通过DOM关系精准匹配：

<div class="bios_container">
  <div class="bios_ellipsis">这里是被截断的文本内容...</div>
  <a href="your-url-1" class="read_more">阅读更多</a>
</div>
<div class="bios_container">
  <div class="bios_ellipsis">这里是另一段被截断的文本内容...</div>
  <a href="your-url-2" class="read_more">阅读更多</a>
</div>
<!-- 重复8次 -->

2. 补充CSS优化 #

给容器设置相对定位，让绝对定位的链接相对于容器定位，避免滚动时位置错乱：

.bios_container {
  position: relative;
  margin-bottom: 40px; /* 为链接预留空间 */
}

.read_more {
  display: none; /* 默认隐藏链接 */
}

/* 保留原有的文本截断CSS */
.bios_ellipsis {
  vertical-align: middle!important;
  overflow: hidden!important;
  text-overflow: ellipsis!important;
  display: -webkit-box!important;
  -webkit-line-clamp: 5!important; 
  line-clamp: 5!important;
  -webkit-box-orient: vertical!important;
  display: -moz-box;
}

3. 修正JS代码 #

$(document).ready(function() {
  // 封装处理逻辑，方便复用
  function adjustReadMoreLinks() {
    $('.bios_ellipsis').each(function(index) {
      const $ellipsis = $(this);
      // 根据DOM结构选择对应链接，这里假设是兄弟元素，可根据实际调整（如.next()、parent().find()）
      const $readMore = $ellipsis.siblings('.read_more');
      
      if ($ellipsis[0].clientWidth <= 600) {
        const ellipsisPos = $ellipsis.offset();
        const ellipsisHeight = $ellipsis.outerHeight();
        // 计算链接位置：放在div下方10px处，与div左对齐
        $readMore.css({
          position: 'absolute',
          top: ellipsisPos.top + ellipsisHeight + 10 + 'px',
          left: ellipsisPos.left + 'px',
          display: 'block'
        });
      } else {
        // 窗口宽度足够时隐藏链接
        $readMore.css('display', 'none');
      }
    });
  }

  // 页面加载时初始化
  adjustReadMoreLinks();

  // 监听窗口 resize 事件，实时调整链接位置
  $(window).resize(function() {
    adjustReadMoreLinks();
  });
});

关键改进点 #

• 用.each()遍历每个bios_ellipsis，确保单独处理每个元素。
• 通过DOM关系匹配对应read_more，避免批量操作所有链接。
• 基于当前元素的位置和高度计算链接位置，保证每个链接对应自己的div。
• 监听窗口resize事件，实时响应窗口大小变化。
• 容器设置相对定位，让绝对定位的链接布局更稳定。

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