移动端h2标题文本超出容器的问题如何解决？

针对小屏幕上h2标题文本溢出容器的问题，给你几个实用的解决办法：

方法1：强制长单词换行 #

给#toc h2添加换行相关属性，让过长的单词自动拆分换行，避免超出容器边界：

#toc h2 {
    font-size: 1.2em;
    font-weight: bold;
    margin-left: 20px;
    margin-right: 15px;
    /* 强制长单词内部换行 */
    overflow-wrap: break-word;
    /* 替换pre-wrap，普通文本无需保留预格式换行规则 */
    white-space: normal;
}

如果是中文内容，也可以用word-break: break-all来强制换行，英文场景用overflow-wrap: break-word会更贴合单词语义拆分。

方法2：优化容器宽度适配小屏 #

原容器width:70%在小屏幕下可能空间不足，改成自适应宽度：

#toc {
    background: #eaf9f8;
    padding: 5px 0 2px;
    /* 减去左右margin的2%，占满可用空间 */
    width: calc(100% - 4%);
    max-width: 650px;
    margin-left: 2%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: inline-block;
    border-radius: 6px;
    border: 2px solid #333;
}

这样小屏幕下容器会尽可能利用可用宽度，减少文本溢出概率。

方法3：响应式调整字体大小（可选） #

如果极小屏幕下还是有溢出问题，可通过媒体查询缩小标题字体：

@media (max-width: 480px) {
    #toc h2 {
        font-size: 1em;
    }
}

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