CSS如何將超出的內容隱藏
有時候容器中的內容會超出容器的邊界,顯得非常的不好看,所以需要將超出的部分隱藏,下面簡單介紹一下實現此效果的方法。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .parent { width: 200px; height: 200px; border: 1px solid red; } .children { width: 240px; height: 250px; border: 1px solid blue; } </style> </head> <body> <div class="parent"> <div class="children"></div> </div> </body> </html>
以上程式碼中的內容超出了邊界,那麼我們可以使用將容器的overflow屬性值設定為hidden即可。
上面的設定的是將所有超出的內容都隱藏,我們也可以設定橫向或者縱向超出內容的隱藏。程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .parent { width: 200px; height: 200px; border: 1px solid red; overflow: hidden; } .children { width: 240px; height: 250px; border: 1px solid blue; } </style> </head> <body> <div class="parent"> <div class="children"></div> </div> </body> </html>
以上程式碼中,子div無論是縱向還是橫向都超出了邊界。如果我們只想隱藏橫向超出的內容,可以使用如下程式碼:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .parent { width: 200px; height: 200px; border: 1px solid red; overflow-x: hidden; } .children { width: 240px; height: 250px; border: 1px solid blue; } </style> </head> <body> <div class="parent"> <div class="children"></div> </div> </body> </html>
相關文章
- CSS實現隱藏超出的內容CSS
- css文字超出div隱藏剩下內容並顯示省略號CSS
- CSS——文字超出隱藏顯示省略號CSS
- css超出部分隱藏,js倒數計時CSSJS
- css實現文字超出li寬度的部分隱藏CSS
- css li元素中的文字超出隱藏不換行效果CSS
- css超出隱藏顯示省略號怎麼設定?CSS
- css實現隱藏滾動條並可以滾動內容CSS
- Div+Css+JS做多個顯示/隱藏內容塊CSSJS
- css文字超出2行就隱藏並且顯示省略號CSS
- css如何隱藏一個元素CSS
- 直播軟體app開發,CSS超出隱藏並且能滾動APPCSS
- jdon.com/aboutsite.htm 的內容(隱藏字)
- 3種方法實現CSS隱藏滾動條並可以滾動內容CSS
- echarts 隱藏X軸底部超出的座標線Echarts
- robotframework 使用jQuery處理頁面display隱藏內容FrameworkjQuery
- excel文字太長如何全部顯示 excel文字太多超出表格隱藏Excel
- CSS隱藏元素方法CSS
- js實現的點選顯示或者隱藏相關內容JS
- 直播帶貨原始碼,css隱藏捲軸,但使超出部分任然可以滾動原始碼CSS
- MAC如何顯示隱藏檔案和隱藏隱藏檔案的命令Mac
- css隱藏滾動條CSS
- CSS 隱藏元素的八種方法CSS
- 用css解決內容文字溢位控制td顯示字數以及隱藏省略程式碼CSS
- 如何將我們的Nginx的版本號進行隱藏Nginx
- 當內容超出最大的長度的時候,使用CSS使文字顯示省略號CSS
- 如何隱藏scroll-Y縱向滾動條,並不影響內容滾動的方法
- u盤內容被隱藏win10怎麼顯示_win10 u盤內容不顯示如何恢復Win10
- css設定屬性文字超出隱藏顯示…,但有的時候三個點顯示不全CSS
- 有趣的css—隱藏元素的7種思路CSS
- 三種方法解決純css下拉選單滑鼠移入選單內容時選單隱藏消失的問題CSS
- 使用CSS隱藏元素滾動條CSS
- css實現隱藏滾動條CSS
- 用CSS製作隱藏選單CSS
- 由顯示/隱藏引出的CSS Bug(轉)CSS
- CSS“隱藏”元素的幾種方法的對比CSS
- 蘋果容器超出內容overflow滑動卡頓問題蘋果
- mac顯示隱藏資料夾快捷鍵是什麼 mac顯示隱藏資料夾內容指令是什麼Mac