Html 纯css中的可折叠文本高度

以下是我到目前为止的一个片段：

扩展{ 高度：0px； 宽度：0px； 溢出：隐藏； 过渡：高度0.5s，宽度0.5s，易于进出； 背景：000000； 颜色：FFF； } 输入{ 显示：无； 可见性：隐藏； } 输入：选中+标签+展开{ 高度：150像素； 宽度：600px； } 切换：选中~label:：before{ 内容：-； } /*无用的样式*/ 主要{ 背景：EEE； 宽度：100px； 保证金：20px自动； 填充：10px0； 盒影：0 3px 5px rgba0,0,0,0.3； } 部分{ 填充：0 20px； } 标签{ 显示：块； 填充：0.5em； 文本对齐：居中； 边框底部：1px实心CCC； 颜色：666； } 标签：悬停{ 颜色：000； } 标签：：之前{ 字体系列：Consoleas、摩纳哥、monospace； 字体大小：粗体； 字体大小：15px； 内容：+； 垂直对齐：文本顶部； 显示：内联块； 宽度：20px； 高度：20px； 右边距：3倍； 背景：中心径向梯度亮度，CCC 50%，透明50%； } 隐藏的小猫 Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。 它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着 桌面发布软件，如Aldus PageMaker，包括Lorem Ipsum版本

隐藏的小猫 喵喵

您可以尝试使用“最大高度”而不是“高度”

扩展{ 最大高度：0px； 宽度：0px； 溢出：隐藏； 过渡：最大高度0.5s，宽度0.5s，易于进出； 背景：000000； 颜色：FFF； } 输入{ 显示：无； 可见性：隐藏； } 输入：选中+标签+展开{ 最大高度：150像素； 宽度：600px； } 切换：选中~label:：before{ 内容：-； } /*无用的样式*/ 主要{ 背景：EEE； 宽度：100px； 保证金：20px自动； 填充：10px0； 盒影：0 3px 5px rgba0,0,0,0.3； } 部分{ 填充：0 20px； } 标签{ 显示：块； 填充：0.5em； 文本对齐：居中； 边框底部：1px实心CCC； 颜色：666； } 标签：悬停{ 颜色：000； } 标签：：之前{ 字体系列：Consoleas、摩纳哥、monospace； 字体大小：粗体； 字体大小：15px； 内容：+； 垂直对齐：文本顶部； 显示：内联块； 宽度：20px； 高度：20px； 右边距：3倍； 背景：中心径向梯度亮度，CCC 50%，透明50%； } 隐藏的小猫 Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。 它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着 桌面发布软件，如Aldus PageMaker，包括Lorem Ipsum版本

隐藏的小猫 喵喵

---

你不能将高度设置为自动。@cale_b这个答案正是我需要的，谢谢！我仍然认为Quantastical的答案是正确的，因为他是第一个发布的。