Question

我有一个被截断的lorem ipsum文本。当您按下“readmore»”按钮时，它会完全显示文本。

我的问题是，当您按下“readmore»”按钮时，文字会垂直向上移动。

$(document).ready(function(){
  $(".readmore-btn").on("click",function(){
    $(".readmore").toggleClass("truncate");
  })
});

.truncate {
  max-height: 55px;
  overflow-y:hidden;
}
.readmore-btn {
  color: #337ab7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h4>Text before</h1>
<div class="readmore truncate">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus. Vestibulum congue nunc eget feugiat euismod. Praesent porta cursus libero, ut vestibulum leo suscipit non. Vivamus vulputate urna quis tincidunt congue. </p>
</div>
<div class="readmore-btn">Readmore »</div>
<h4>Text After</h1>

Answer 1

从overflow-y: hidden;班级移动.truncate并将其移至.readmore班级可解决转移问题。

＆＃13;

$(document).ready(function(){
  $(".readmore-btn").on("click",function(){
    $(".readmore").toggleClass("truncate");
  })
});

＆＃13;

.readmore {
  overflow-y:hidden;
 }
.truncate {
  max-height: 55px;
  
}
.readmore-btn {
  color: #337ab7;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h4>Text before</h1>
<div class="readmore truncate">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus. Vestibulum congue nunc eget feugiat euismod. Praesent porta cursus libero, ut vestibulum leo suscipit non. Vivamus vulputate urna quis tincidunt congue. Vestibulum malesuada neque sit amet eros efficitur pharetra. Vestibulum consequat purus sit amet ex euismod, ut consequat tellus vehicula. Proin suscipit in risus ut placerat. Integer porta id libero ac finibus. Ut at tellus turpis. Phasellus dolor erat, ullamcorper a risus ultrices, iaculis malesuada nisl. Integer tellus arcu, sodales quis mattis ac, sagittis eu turpis. Suspendisse tristique tempor pharetra.</p>
</div>
<div class="readmore-btn">Readmore »</div>
<h4>Text After</h1>

＆＃13;

Answer 2

这是由浏览器添加到段落的默认边距引起的。

添加

.truncate p{margin:0}

到你的css

CSS文本截断垂直对齐

2 个答案: