本文针对CSS中max-height属性在隐藏内容时可能出现的无法完全隐藏问题，提供了一种解决方案。通过移除隐藏状态下的padding，并在显示状态下重新添加padding，可以有效解决内容溢出的问题。此外，本文还提供了一段优化的JavaScript代码，用于简化“Read More”功能的实现。
在使用CSS的max-height属性来实现“Read More”或手风琴效果时，开发者可能会遇到一个常见问题：即使将max-height设置为0，并设置overflow: hidden，部分内容（如文字的第一行）仍然会显示出来。这通常是由于元素本身的padding属性造成的。
问题分析
overflow: hidden 属性会隐藏超出元素边界的内容，但它并不会影响元素的 padding。因此，即使 max-height 为 0，元素的 padding 仍然会占据空间，导致部分内容可见。
立即学习“前端免费学习笔记（深入）”；
解决方案
解决这个问题的关键在于，在元素处于隐藏状态时，将其 padding 设置为 0，并在元素显示时，再恢复其 padding 值。
CSS 代码示例
假设我们有以下 HTML 结构：
<div class="accordion">
<button class="accordion-button">Read More</button>
<div class="accordion-content">
This is the content that will be hidden initially.
</div>
</div>对应的 CSS 代码如下：
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
padding: 0; /* 初始状态下，padding 为 0 */
}
.accordion-content.active {
max-height: 500px; /* 设置一个足够大的值 */
padding: 20px; /* 激活状态下，恢复 padding */
}在这个例子中，.accordion-content 初始状态下 max-height 为 0，overflow 为 hidden，并且 padding 也为 0。当 .accordion-content 添加 active 类时，max-height 会设置为一个足够大的值，padding 也会恢复到 20px。
JavaScript 代码示例（优化版）
为了更方便地控制 active 类的添加和移除，我们可以使用 JavaScript。以下是一个优化的 JavaScript 代码示例，用于简化“Read More”功能的实现：
const accordionEls = document.getElementsByClassName("accordion");
// 为每个元素添加事件监听器
Array.from(accordionEls).map(element => {
element.addEventListener("click", toggleVisibility)
});
function toggleVisibility(event) {
// 获取事件附加到的元素
const { currentTarget } = event;
// 获取需要切换的元素
const toggleElements = [
"platforms",
"countries",
"licensed",
"support",
"established"
].map(name => document.querySelector(`.review_page__${name}`))
.filter(Boolean);
// 设置 .active 类到 Read More 按钮
currentTarget.classList.toggle("active");
// 循环遍历每个元素，切换其最大高度
toggleElements.map(el => {
const currentMaxHeight = el.style.maxHeight;
const maxHeight = currentMaxHeight ? null : `${el.scrollHeight}px`;
el.style.maxHeight = maxHeight;
});
}这段代码首先获取所有 class 为 "accordion" 的元素，然后为每个元素添加一个点击事件监听器。当点击事件触发时，toggleVisibility 函数会切换 .accordion-content 元素的 active 类，从而改变其 max-height 和 padding。
注意事项
- max-height 的值需要根据实际内容的高度进行调整，确保能够完全显示内容。
- transition 属性可以使 max-height 的变化过程更加平滑。
- 在 JavaScript 代码中，可以使用 scrollHeight 属性来获取元素的完整高度。
总结
通过移除隐藏状态下的 padding，并在显示状态下重新添加 padding，可以有效解决 CSS max-height 无法完全隐藏内容的问题。同时，使用优化的 JavaScript 代码可以简化“Read More”功能的实现，提高开发效率。
