CSS 控制列表僅在指定區域顯示：overflow:hidden 實現

需求

列表超出容器範圍時隱藏，不顯示滾動條。

解決方案

.container {
    width: 300px;
    height: 200px;
    overflow: hidden; /* 核心屬性 */
    /* 或 overflow: auto; 顯示滾動條 */
}

進階：裁剪特定方向

• overflow-x: hidden; overflow-y: auto; 僅水平隱藏，垂直滾動。
• text-overflow: ellipsis; 配合 white-space: nowrap; overflow: hidden; 實現單行文本省略號。

注意

父容器必須有明確 width/height 或 max-width/max-height，否則 overflow 不生效。