代码之家 › 专栏 › 技术社区 › Vincent Tang

css文本截断垂直对齐

css html jquery javascript

Vincent Tang · 技术社区 · 7 年前

我有一个被截断的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>

2 回复 | 直到 7 年前

Mathias Rechtzigel 7 年前

搬家 overflow-y: hidden; 从 .truncate 类并将其移动到 .readmore 类解决了移位问题。

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

.readmore {
  overflow-y:hidden;
 }
.truncate {
  max-height: 55px;
  
}
.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. 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>

alfredopacino 7 年前

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

只要添加

.truncate p{margin:0}

给你的CSS

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

5 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前