如何实现响应式文本展开收起且按钮位于第二行末尾

核心修改说明 #

• 替换原有单行省略方案为CSS原生多行省略实现，默认固定展示2行文本
• 调整按钮为绝对定位，固定在容器右下角，折叠状态下自然处于第二行末尾
• 简化JS切换逻辑，通过类名控制展开/收起状态，维护成本更低

完整修改后代码 #

CSS代码 #

.myClass {
  width : 500px;
  line-height: 1.5;
  position: relative;
}

#overflow_text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: 60px;
  margin: 0;
}

#overflow_text.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}

#toggle_text {
  cursor: pointer;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 0 4px;
}

.button_span{
  border: 1px solid black;
}

JS代码 #

function myFunction() {
  const text = document.getElementById('overflow_text')
  const toggle = document.getElementById('toggle_text')

  if (text.classList.contains('expanded')) {
    text.classList.remove('expanded')
    toggle.textContent = '展开更多'
  } else {
    text.classList.add('expanded')
    toggle.textContent = '收起'
  }
}

HTML代码 #

<div class="container">
  <div class="row">
    <div class="col-md-6 myClass">
      <p id='overflow_text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
      <span onClick="myFunction()" id="toggle_text" class="button_span">展开更多</span>
    </div>
  </div>
</div>

注意事项 #

如果需要适配更老的浏览器，可以自行调整line-height后固定折叠状态下的文本容器高度为line-height * 2，配合overflow: hidden实现两行截断，逻辑一致。

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