設置overflow: hidden會失效通常是因為沒有設置高度或解決換行問題，設置overflow其元素必須有指定高度或解決換行問題才能發生作用。
預設的範例（overflow 沒有作用）
width:500px;
overflow: hidden;
這是一段很長的文字，為了讓溢出的文字被隱藏所以就先廢話一下。本文將作為一個範例，首先這是一般沒有設定高度或不換行的情況，文章長度是這樣的。
接下來新增一個height，效果如下：
設置 height 的範例（縱向隱藏）
width:500px;
height:3.9em;
overflow: hidden;
這是一段很長的文字，為了讓溢出的文字被隱藏所以就先廢話一下。本文將作為一個範例，首先這是一般沒有設定的情況，文章長度是這樣的。
成功隱藏縱向文字了，這裡也可以改max-height，不過指定高度是用於縱向（overflow-y）隱藏，如果希望橫向隱藏（overflow-x）隱藏，則使用white-space:nowrap。
設置 white-space 的範例（橫向隱藏）
width: 500px;
white-space: nowrap;
overflow: hidden;
這是一段很長的文字，為了讓溢出的文字被隱藏所以就先廢話一下。本文將作為一個範例，首先這是一般沒有設定的情況，文章長度是這樣的。
成功橫向隱藏了。
說明
white-space是空白字元的意思，nowrap則是強制不換行的意思，由於原本會自動換行因此達不到橫向隱藏的效果，加上這句之後因為不換行所以就可以隱藏了。
white-space是空白字元的意思，nowrap則是強制不換行的意思，由於原本會自動換行因此達不到橫向隱藏的效果，加上這句之後因為不換行所以就可以隱藏了。
以上就是解決overflow: hidden失效問題的辦法，希望能幫到有需求的人。
本文是否對您有幫助？