显示更多/更少具有响应行为的文本[重复]答案

【问题标题】：Show more/less text with responsive behaviour [duplicate]显示更多/更少具有响应行为的文本[重复]
【发布时间】：2021-07-01 21:27:22
【问题描述】：

我指的是this solution.我想要的更改是阅读更多按钮应该位于行尾，如图所示

加载时应该只有两行，最后第二行显示更多按钮
在显示更多时它应该展开并显示整个文本
在显示较少时，它应该缩回到两行，并在行尾带有按钮

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

  if (text.style.overflow == 'visible') {
    toggle.innerHTML = '..more'
    text.style.overflow = 'hidden'
    text.style.textOverflow = 'ellipsis'
    text.style.whiteSpace = 'nowrap'
  } else {
    toggle.innerHTML = 'less'
    text.style.overflow = 'visible'
    text.style.textOverflow = 'string'
    text.style.whiteSpace = 'normal'
  }
}

.myClass {
  height: 150px;
  width : 500px;
}

#overflow_text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#toggle_text {
  cursor: pointer;
}

.button_span{
    border: black;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

<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">more</span>
    </div>
  </div>
</div>

【问题讨论】：

@Kinglish Read More 应该在第二行的末尾，并且应该是响应式的。看起来阅读更多是新行
这是我不久前为其他人制定的解决方案。如果您觉得有帮助，请点赞：stackoverflow.com/a/67731253/1772933
@Kinglish 感谢您将我重定向到现有解决方案。我现在已经更新了我的问题。我只想在同一行中实现“更多/更少”按钮
尝试将您的 p 设置为 display:inline-block.. 并且没有投票？

标签： javascript html css show-hide

【解决方案1】：

我建议在按钮中包含“...”，因为文本在空间不足时“不知道”。

CSS：

#mainContent{
    position:relative;
    line-height:1em;
    overflow:hidden;
}
.showContent{
    height: 2em;
}
.hideContent{
    height: auto;
}
#moreButton{
    position:absolute;                 
    bottom:0;                         
    right:0;        
    cursor:pointer;
    background:white;    
    padding-left:4px;             
}

HTML：

<div class="showContent" id="mainContent">
    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
    <span id="moreButton" onclick="showMoreLess()">...more</span>
</div>

...最后是 JS：

function showMoreLess(){
    var mc = document.getElementById('mainContent');
    var btn = document.getElementById('moreButton');
    if (btn.innerHTML == '...more') {
        mc.className = 'hideContent';
        btn.innerHTML = '...less';
    } else {
        mc.className = 'showContent';
        btn.innerHTML = '...more';
    }
}

如果这有帮助，请告诉我！

【讨论】：