在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常會(huì)使用CSS來設(shè)置頁(yè)面的樣式，但是有些時(shí)候，一些文字或圖片的內(nèi)容會(huì)超出其所在的區(qū)域，導(dǎo)致頁(yè)面顯示不完整。針對(duì)這種問題，我們可以使用CSS的超出顯示功能來解決。下面我們就來詳細(xì)講解一下該功能的使用。

CSS的超出顯示功能主要包括兩種：超出部分省略號(hào)顯示和超出部分滾動(dòng)條顯示。在進(jìn)行CSS設(shè)置時(shí)，我們可以通過設(shè)定“text-overflow”屬性來達(dá)到這種效果。

/* 超出部分省略號(hào)顯示 */
 .ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
 }
/* 超出部分滾動(dòng)條顯示 */
 .scroll {
overflow: scroll;
height: 200px;
width: 300px;
 }

對(duì)于超出部分省略號(hào)顯示，在設(shè)置中，我們需要使用“white-space”屬性來讓內(nèi)容單行顯示，同時(shí)通過“overflow”屬性來隱藏溢出部分，最后通過“text-overflow”屬性來設(shè)置省略號(hào)的樣式。這樣設(shè)置后，當(dāng)內(nèi)容超出其所屬區(qū)域時(shí)，溢出部分就會(huì)被省略并顯示省略號(hào)。

而對(duì)于超出部分滾動(dòng)條顯示，則需要設(shè)置“overflow”屬性為“scroll”，同時(shí)可以通過設(shè)置其“height”和“width”屬性來限制其滾動(dòng)區(qū)域的大小，這樣當(dāng)內(nèi)容超過區(qū)域大小時(shí)，滾動(dòng)條就會(huì)出現(xiàn)，用戶可以通過滾動(dòng)條來查看溢出部分的內(nèi)容。