以下为本站自用的修复PIX主题文字溢出容器的CSS代码，
添加在PIX主题后台的自定义CSS里即可完成修复。

/* 修复正文区和评论区里的文字溢出 */
.single-content, .comment-list li .com_right {
    word-wrap: break-word;
    /* 允许在适当的地方断开长链接 */
    word-break: break-all;
    /* 确保可在任意字符间断开 */
    overflow-wrap: break-word;
    /* 设置这个属性，提高兼容性 */
}

/* CODE标签和块都添加横向滚动条，防止溢出 */
code {
    display: block;
    width: 100%;
    overflow-x: auto;
    /* 设置横向滚动条 */
}

/* CODE标签滚动条样式 */
code::-webkit-scrollbar {
    height: 8px;
}
code::-webkit-scrollbar-thumb {
    background: #dcdcdc;
    outline-offset: -2px;
    outline: 2px solid #fff;
}
code::-webkit-scrollbar-track{
    background: #f4f4f4;
}
/* CODE代码块始终显示滚动条，防止受到CODE标签CSS影响 */
.wp-block-code code {
    display: block;
    overflow-x: auto;
    /* 设置横向滚动条 */
    text-wrap: nowrap;
}
/* 设置CODE代码块滚动条样式，防止受到CODE标签CSS影响 */
.wp-block-code code::-webkit-scrollbar-thumb {
    background-color: #808080;
}
.wp-block-code code::-webkit-scrollbar-track{
    background: none;
}

转载请注明出处 © 2024 www.suibi.net