在網(wǎng)頁(yè)設(shè)計(jì)中，經(jīng)常會(huì)遇到一種情況，就是文字內(nèi)容較多，而容器尺寸過小，導(dǎo)致部分文字內(nèi)容無法完全顯示。這時(shí)候我們需要使用 CSS 來實(shí)現(xiàn)文字的滾動(dòng)顯示。

實(shí)現(xiàn)這個(gè)效果的方法，就是利用 CSS 的 overflow 屬性。我們可以在包含文字的容器上添加一個(gè)樣式，將 overflow 屬性設(shè)置為 hidden，再同時(shí)添加 white-space 屬性為 nowrap，這樣就可以讓文字強(qiáng)制在一行內(nèi)顯示，并將溢出部分隱藏。

.container {
overflow: hidden;
white-space: nowrap;
/* 其他樣式代碼 */
}

但實(shí)際上，文字被截?cái)嗖㈦[藏并不是最終的目的，我們需要讓用戶通過滾動(dòng)來查看所有的內(nèi)容。這時(shí)候，我們就可以使用 CSS 的 Marquee 屬性。

Marquee（跑馬燈）屬性是一個(gè)非標(biāo)準(zhǔn)屬性，可以實(shí)現(xiàn)文字、圖片、聲音等作為跑馬燈來滾動(dòng)或閃爍。在 CSS3 中，這個(gè)屬性已經(jīng)被廢棄，但它仍然可以在一些老舊的瀏覽器中使用。

要想運(yùn)用 Marquee 屬性，需要先將 overflow 屬性設(shè)置為 visible。然后在容器內(nèi)添加文本元素，并設(shè)置其樣式。

.container {
overflow: visible;
white-space: nowrap;
/* 其他樣式代碼 */
}
p {
display: inline-block;
margin: 0;
font-size: 16px;
line-height: 1.4;
/* 其他樣式代碼 */
-webkit-marquee-direction: left; /* Safari 和 Chrome */
marquee-direction: left; /* 其他瀏覽器 */
-webkit-marquee-speed: normal;
marquee-speed: normal;
-webkit-marquee-style: scroll;
marquee-style: scroll;
}

通過設(shè)置 marquee-direction 屬性，可以指定文字滾動(dòng)的方向。對(duì)于跑馬燈，通常會(huì)設(shè)置為左右滾動(dòng)。而 marquee-speed 屬性可以控制文字滾動(dòng)的速度。值有 slow、normal、fast 可以選擇。最后，marquee-style 屬性可以指定文字的滾動(dòng)方式，包括 scroll、slide 和 alternate 三種方式。

在實(shí)際使用過程中，需要根據(jù)自己的需求來靈活運(yùn)用 Marquee 屬性，并且需要適度使用，避免影響用戶體驗(yàn)。例如，如果要在網(wǎng)頁(yè)的頭部添加一個(gè)滾動(dòng)公告，可以使用這個(gè)屬性，但如果在整個(gè)頁(yè)面中都滾動(dòng)，可能會(huì)造成用戶閱讀困難，影響閱讀效果。