up
down
Close
架站盒子
Web Development Box
 

CSS overflow: hidden 失效問題解決辦法

│ 1420 Views │ CSS
CSS overflow: hidden 失效問題解決辦法
CSS overflow: hidden 失效問題解決辦法

設置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則是強制不換行的意思,由於原本會自動換行因此達不到橫向隱藏的效果,加上這句之後因為不換行所以就可以隱藏了。

以上就是解決overflow: hidden失效問題的辦法,希望能幫到有需求的人。

延伸閱讀

本文是否對您有幫助?