如何计算width: max-content元素的translateX值以实现文本完全滚出容器？

要让使用width: max-content的文本完全滚出容器，关键是计算出需要向左移动的总距离——这个距离等于文本自身的宽度 + 容器的宽度。下面分步骤说明实现方法：

核心原理 #

你的初始设置中，p元素通过left: 100%把左边缘对齐到容器的右边缘。要让文本完全滚出容器左侧，需要让文本的右边缘移动到容器左边缘的外侧，也就是向左移动的总距离是「容器宽度 + 文本自身宽度」。

具体实现 #

1. 修正CSS语法错误并添加核心计算 #

先补全代码中缺失的分号，再用容器查询单位实现精准计算：

@keyframes scroll_text {
    0% {
        transform: translateX(0)
    }
    100% {
        /* 100%是文本自身宽度，100cqw是容器宽度 */
        transform: translateX(calc(-100% - 100cqw))
    }
}

div.container {
    margin: 2rem;
    padding-block: 1em;
    background-color: black;
    overflow: hidden;
    /* 开启容器尺寸查询，让子元素能获取容器宽度 */
    container-type: inline-size;
}

div.container p {
    line-height: 1em;
    width: max-content;
    position: relative;
    left: 100%;
    animation: scroll_text 15s linear infinite;
    color: white; /* 新增文字颜色方便查看效果 */
}

2. 浏览器兼容替代方案 #

如果目标浏览器不支持容器查询，可以用CSS变量结合JS动态获取容器宽度：

@keyframes scroll_text {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(calc(-100% - var(--container-width)))
    }
}

div.container {
    margin: 2rem;
    padding-block: 1em;
    background-color: black;
    overflow: hidden;
    --container-width: 0px; /* 初始化变量 */
}

div.container p {
    line-height: 1em;
    width: max-content;
    position: relative;
    left: 100%;
    animation: scroll_text 15s linear infinite;
    color: white;
}

搭配JS动态更新容器宽度：

const container = document.querySelector('div.container');
const updateContainerWidth = () => {
    container.style.setProperty('--container-width', `${container.offsetWidth}px`);
};
// 初始化设置
updateContainerWidth();
// 窗口 resize 时更新
window.addEventListener('resize', updateContainerWidth);

效果说明 #

两种方案都能让文本从容器右侧进入，向左滚动直到完全离开容器左侧，随后循环动画，实现完整的滚出效果。

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