jquery - 根据行数显示/隐藏文本

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/ (调整结果部分的大小以显示差异)