CSS 文字自動橫排滾動是一種非常實用的 CSS 技巧，它可以讓橫向排列的文本自動滾動，非常適合展示一些跑馬燈效果的新聞內容或者廣告宣傳語。下面我們來看一下如何實現文字自動橫排滾動。

/* 創建文本容器 */
.text-container {
white-space: nowrap; /* 禁止自動換行 */
overflow: hidden; /* 隱藏文本 */
}
/* 滾動動畫 */
@keyframes scroll {
0% { transform: translateX(0); } /* 初始位置 */
100% { transform: translateX(-100%); } /* 滾動到最左邊 */
}
/* 文本樣式 */
.text {
display: inline-block; /* 行內塊元素 */
animation: scroll 10s linear infinite; /* 滾動動畫 */
}

通過創建一個文本容器 .text-container，我們使用 white-space:nowrap 禁止自動換行，并使用 overflow:hidden 隱藏超出容器的文本。然后我們使用行內塊元素 .text 來展示文本，并使用 animation 屬性來控制文本的滾動動畫。

最后，我們使用 keyframes 屬性來控制滾動的細節，定義了 @keyframes scroll 動畫，控制文本從初始位置滾動到最左邊。值得注意的是，這里我們使用了 translateX(-100%) 來控制文本在橫向方向上滾動，因為 translateX 是根據元素本身的寬度進行偏移的，所以這里我們使用百分比單位來確保文本始終在容器內滾動。

通過以上 CSS 代碼我們就可以實現一個非常流暢的文字自動橫向滾動效果，為網站增添了一份時尚的動態感。