如何用CSS实现行内文字切换动画？解决错位与换行问题

你的核心问题有两个：一是.word用了块级元素（div）导致换行脱离文本流；二是绝对定位的参考容器不对，导致文字跑到页面中间。

直接上修改后的代码，关键改动已标注：

<style>
.container {
    position: relative;
    font-family: inherit;
    color: rgb(255, 255, 255);
    font-size: inherit;
    filter: contrast(15);
    /* 新增：让容器变成行内块元素，留在文本流中，不独占一行 */
    display: inline-block;
    /* 新增：固定最小宽度，避免切换文字时容器宽度跳动 */
    min-width: 2em;
    /* 新增：适配行高，避免文字溢出容器 */
    line-height: 1.2;
}

.word {
    /* 修改：去掉全局居中的绝对定位，改为相对于容器定位 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* 让文字在容器内水平居中 */
    text-align: center;
    animation: switch 8s infinite ease-in-out;
    /* 移除原有的全局宽度和外边距，避免撑满页面 */
    min-width: auto;
    margin: 0;
    /* 新增：继承父级颜色，保持样式统一 */
    color: inherit;
}

.word:nth-child(1) {
    animation-delay: -7s;
}

.word:nth-child(2) {
    animation-delay: -6s;
}

@keyframes switch {
    0%,
    5%,
    100% {
        filter: blur(0px);
        opacity: 1;
    }

    50%,
    80% {
        filter: blur(180px);
        opacity: 0;
    }
}
</style>

<div>
Stworzymy stronę, która zdobędzie 
<div class="container">
    <span class="word">dla</span>
    <span class="word">za</span>
</div> 
Ciebie klienta.
</div>

关键改动说明： #

• 将.container设置为display: inline-block，使其嵌入文本流，和前后文字保持同一行，不再独占整行。
• 把.word的div替换为span（或给div加display: block），同时调整绝对定位为相对于.container的左上角，让切换文字在容器内重叠显示。
• 给.container添加min-width，避免不同长度的切换文字导致容器宽度跳动，保证文本流稳定。
• 移除.word里的全局居中属性（top:50%、left:50%、transform: translate(-50%, -50%)），改用容器内水平居中的text-align: center。

修改后，切换文字会像普通文本一样留在句子中，同时保持动画效果，不会出现跑位或换行问题。

内容的提问来源于stack exchange，提问作者Łukasz Wójcik