CSS文字超出 自動滾動，是在網頁設計中一種非常有用的技巧。

當文字內容過多，而容器又不能夠適應文字的長度時，就需要使用CSS來處理這種情況。

.text-overflow {
white-space: nowrap; /* 禁止換行 */
overflow: hidden; /* 超出部分隱藏 */
text-overflow: ellipsis; /* 超出部分用省略號代替 */
}
.auto-scroll {
overflow: hidden; /* 隱藏超出部分 */
text-align: center; /* 文字居中 */
animation: scroll .5s linear infinite; /* 無限循環(huán)滾動*/
}
@keyframes scroll {
0% {transform: translateY(0)}
100% {transform: translateY(-100%)} /* 向上滾動100% */
}

以上是CSS代碼：

• .text-overflow用于顯示省略號代替超出部分，
• .auto-scroll用于自動滾動顯示超出的長文本。

在HTML中，只需要將長文本放入auto-scroll容器中，設置相應的CSS樣式即可。

<div class="auto-scroll">
<div class="text-overflow">
文本內容很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長
</div>
</div>

如此設計，就可以在網頁中實現(xiàn)文字超出，自動滾動的效果。