在網頁中，當元素的內容超出了它所在的容器時，通常會出現滑動條以便用戶滾動查看信息。不過，有時候我們不希望出現滾動條，而是希望當內容超出容器時，自動隱藏部分內容，同時在需要的時候能夠滑動查看。這時候就可以使用CSS來實現。 要實現這個效果，首先我們需要將容器元素的overflow屬性設置為hidden，這樣就能夠隱藏超出部分的內容。然后，我們需要啟用CSS的滑動條樣式，這可以通過給容器元素添加::-webkit-scrollbar的偽元素樣式來完成。 具體實現方法如下所示：

p {
/*設置容器為隱藏溢出內容 */
overflow: hidden;
/*啟用滑動條樣式 */
scrollbar-width: thin;
scrollbar-color: rgba(100, 100, 100, 0.5) rgba(255, 255, 255, 0.5);
}
p::-webkit-scrollbar {
width: 8px;
height: 8px;
}
p::-webkit-scrollbar-thumb {
background-color: rgba(100, 100, 100, 0.5);
border-radius: 10px;
}
p::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.5);
}

這段CSS代碼的意思是，首先將p標簽所在容器的overflow屬性設置為hidden，然后啟用滑動條的樣式，并設置滑動條的寬度為8像素、高度為8像素，滑動塊的背景顏色為半透明的灰色，滑動塊的邊角半徑為10像素，滑動條的背景顏色為半透明的白色。 需要注意的是，這里使用了WebKit的私有樣式::-webkit-scrollbar，因此只能在WebKit內核的瀏覽器中生效，如Chrome和Safari等。其他瀏覽器中可能需要使用不同的樣式，或者使用JavaScript來實現滑動條效果。 總的來說，通過對CSS樣式的設置，我們可以實現超出容器部分的內容自動隱藏，同時又能夠通過滑動條來查看隱藏的內容，提高了網頁的交互性和用戶體驗。