Question

我有一个垂直显示的文字框。我的客户希望在计算机/笔记本电脑上查看时，该框中的文本将完整显示，并在移动设备上查看时显示“更多”按钮。我认为最好的方法就是展示，让我们在桌面上说10行文字，在移动设备上放5行，然后隐藏其余部分，但我不知道这是否可行。这是我的HTML：

<div class="box31 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-0 col-xs-8 col-xs-offset-2">
  <div class="phone">
    <img src="imgs/phone.png" alt="phone">
  </div>
  <div class="box-text box-text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>
  <div class="view-more">
    <button class="btn btn-success">More...</button>
  </div>
</div>

Answer 1

我认为您可以使用CSS的媒体查询：

 @media screen and (max-width: 768px) {
  p {
    max-height:60px;
    overflow: hidden;
    color:red;
  }
}

https://jsfiddle.net/wrbwpzwu/ （调整结果部分的大小以显示差异）

Answer 2

以下是实现结果的方法

CSS

.open {
    max-height:60px;
    overflow: hidden;
    }

.remove{
  max-height:100%;
}

JS

jQuery(function($){
  $('.event').click(function(){
  $('.open').toggleClass('remove')
    })
  })

DEMO

Answer 3

要确定要显示的行数，您需要计算行高乘以您要显示的行数。以下示例分为三行。

document.querySelector('.view-more .btn').addEventListener('click', function() {
  this.parentNode.previousElementSibling.classList.add('more');
});

body {
  font-family: tahoma, sans-serif;
}
p {
  margin: 0 0 5px;
}
.box-text {
  font-size: 12px;
  line-height: 12px;
  max-height: 36px;
  overflow: hidden;
  margin-bottom: 10px;
}
.box-text.more {
  max-height: none;
  overflow: visible;
}
@media screen and (min-width: 480px) {
  .view-more {
    display: none;
  }
  .box-text {
    max-height: none;
    overflow: visible;
  }
}

<div class="box31 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-0 col-xs-8 col-xs-offset-2">
  <div class="box-text box-text2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  </div>
  <div class="view-more">
    <button class="btn btn-success">More...</button>
  </div>
</div>

以上代码使用CSS的移动优先原则。

JavaScript只是一个应用于按钮的单击侦听器，该按钮遍历DOM以查找相关的box-text以向其添加more类，从而删除/重置max-height和overflow属性

以上JS的jQuery等价物：

$('.view-more .btn').on('click', function() {
   $(this).parent().prev().addClass('more');
});

根据行数显示/隐藏文本

3 个答案: