Readmore.js链接覆盖文本问题排查求助

你遇到的Readmore.js生成的展开/收起链接覆盖文本的问题，大概率是容器样式与插件默认定位冲突导致的，以下是具体排查和解决步骤：

1. 核心原因分析 #

Readmore.js默认会给生成的切换链接（类名.readmore-toggle）添加绝对定位样式，而你的.class-info容器设置了position: relative，这会让切换链接以该容器为定位基准。但容器的底部内边距（padding-bottom）仅为1rem，不足以容纳切换链接，导致它和正文文本重叠。

同时，插件默认的切换链接会带一个渐变背景，用来模糊覆盖下方的文本，但如果容器内文本刚好延伸到容器底部，就会出现明显的覆盖问题。

2. 快速修复方案 #

方案一：增加容器底部内边距 #

给.class-info增加足够的底部内边距，为切换链接预留空间：

.class-info {
    background: var(--white-color);
    box-shadow: 6px 0 38px rgba(20,20,20,0.10);
    border-radius: 0 0 2px 2px;
    padding: 1rem 2rem 3rem; /* 将底部padding从1rem改为3rem */
    position: relative;
    overflow: hidden;
}

方案二：自定义切换链接样式 #

如果不想调整容器内边距，可以直接修改.readmore-toggle的样式，让它避开文本区域：

.readmore-toggle {
  position: absolute;
  bottom: 1rem; /* 与容器底部padding对齐 */
  right: 2rem;
  background: var(--white-color); /* 用容器背景色完全覆盖下方文本 */
  padding: 0.5rem 1rem;
  text-decoration: none; /* 可选：去掉下划线，优化视觉 */
}

3. 额外排查点 #

• 确认Readmore.js的初始化目标：你是将插件初始化在<article>还是<p>标签上？如果初始化在<p>上，切换链接会直接插入到该段落末尾，可能需要给<p>添加margin-bottom来避免重叠。
• 检查是否有其他自定义CSS覆盖了.readmore-toggle的默认样式，比如强制设置了top属性或者取消了定位，导致位置错乱。

内容的提问来源于stack exchange，提问作者user22114598