如何防止CSS实现的marquee跑马灯改变网站水平宽度？

• 父容器.marquee未设置溢出裁剪规则，执行位移动画时跑出容器的内容会被浏览器计入页面可滚动范围，直接导致页面出现横向滚动条、内容溢出容器边界
• 跑马灯所用的<p>标签是默认块级元素，宽度会自动撑满父容器，加上未设置文本禁止换行规则，translateX的百分比位移是相对于元素自身宽度计算，最终导致位移距离不符合预期，动画起止位置错乱
• 未清除<p>标签默认的外边距，容易引发布局偏移

无需调整HTML结构，仅修改CSS即可解决问题：

1. 给父容器.marquee添加溢出裁剪、相对定位属性，同时加少量内边距撑开高度，避免内部绝对定位元素导致父容器高度塌陷
2. 给跑马灯文本元素清除默认外边距、添加禁止换行规则，改用绝对定位控制位置，确保动画起止位置精准贴合父容器边缘
3. 调整关键帧动画的位移逻辑，保证文本从父容器右边缘外侧入场，左边缘外侧出场，全程不会溢出容器范围

修复后完整CSS代码 #

.marquee{
    background-color: black;
    color: blue;
    font-size: 3em;
    margin-top: 2rem;
    /* 修复新增属性 */
    overflow: hidden;
    position: relative;
    padding: 0.5rem 0;
}
.myMarquee{
    margin: 0;
    white-space: nowrap;
    position: absolute;
    -moz-animation: marqueeAnimation 15s linear infinite;
    -webkit-animation: marqueeAnimation 15s linear infinite;
    animation: marqueeAnimation 15s linear infinite;
}
@-moz-keyframes marqueeAnimation {
    0%   { 
        left: 100%;
        -moz-transform: translateX(0); 
    }
    100% { 
        left: 0;
        -moz-transform: translateX(-100%); 
    }
}
@-webkit-keyframes marqueeAnimation {
    0% { 
        left: 100%;
        -webkit-transform: translateX(0); 
    }
    100% { 
        left: 0;
        -webkit-transform: translateX(-100%); 
    }
}
@keyframes marqueeAnimation {
    0% { 
        left: 100%;
        transform: translateX(0);
    }
    100% { 
        left: 0;
        transform: translateX(-100%);
    }
}

可用HTML代码（原有结构无需改动） #

<!DOCTYPE html>
<html>
    <head>
    <link href = "index.css" rel = "stylesheet" type = "text/css" />
        <meta charset = "utf-8" />
        <title>Mainpage</title>
    </head>
    <body>
        <div class="marquee">
            <p class = "myMarquee">Scrolling Text</p>
        </div>
    </body>
</html>

修复后跑马灯内容会严格限制在父容器范围内滚动，不会触发页面横向滚动条，也不会改变页面原有宽度。

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