Javascript CSS文本截断垂直对齐

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

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

$（文档）.ready（函数（）{
$（.readmore btn”）。在（“单击”，函数（）上{
$（“.readmore”）.toggleClass（“truncate”）；
})
});
.truncate{
最大高度：55px；
溢出y：隐藏；
}
.readmore btn{
颜色：#337ab7；
}

之前的文本
Lorem ipsum dolor sit amet，是一位杰出的献身者。杜伊斯维尔拉克斯东部。这是一个很好的例子。大比乌龟。前庭是一个古老的宫殿。自由之门，前庭，狮子座。维瓦摩斯在康格监狱放假

阅读更多»
移动
溢出-y后的文本：隐藏.truncate
类中选择code>并将其移动到
.readmore
类解决了移位问题


$（文档）.ready（函数（）{
$（.readmore btn”）。在（“单击”，函数（）上{
$（“.readmore”）.toggleClass（“truncate”）；
})
});
.readmore{
溢出y：隐藏；
}
.截断{
最大高度：55px；
}
.readmore btn{
颜色：#337ab7；
}

之前的文本
Lorem ipsum dolor sit amet，是一位杰出的献身者。杜伊斯维尔拉克斯东部。这是一个很好的例子。大比乌龟。前庭是一个古老的宫殿。自由之门，前庭，狮子座。维瓦摩斯在康格监狱放假。前庭是有效的。前庭位于前方，但位于车辆前方。普罗因在鼠耳道中存在。整数端口id libero ac finibus。在泰勒斯土尔皮斯大学。多洛·埃拉特、乌拉姆·科珀和乌尔特里斯、马莱苏达·尼塞尔。圆顶圆顶，圆顶圆顶圆顶，人马座圆顶。临时法雷特拉酒店

阅读更多»
这是由浏览器添加到段落的默认边距造成的

加上

.truncate p{margin:0}

在css中
Hey@alfredpacino——添加0的边距可以解决此处显示的错误——如果您完全删除overflow-y:hidden（从每个div中删除），则移动将不再发生。意外的交互是溢出-y的组合，可防止边距崩溃。