溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何理解CSS屬性中的overflow及相關屬性text-overflow”，在日常操作中，相信很多人在如何理解CSS屬性中的overflow及相關屬性text-overflow問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何理解CSS屬性中的overflow及相關屬性text-overflow”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
一、overflow
指定盒中容納不下的內容的顯示方法。
1.適用范圍：塊級元素
2.可取值：
visible：不剪切內容(默認)。
hidden： 將超出對象尺寸的內容進行裁剪，將不出現滾動條。
scroll： 將超出對象尺寸的內容進行裁剪，并以滾動條的方式顯示超出的內容。
auto： 在需要時裁剪內容并添加滾動條，此為body對象和textarea的默認值。
3.說明：
對于table來說，假如table-layout屬性設置為fixed，則td對象支持帶有默認值為hidden的overflow屬性。如果設為hidden，scroll或者auto，那么超出td尺寸的內容將被剪切。如果設為visible，將導致額外的文本溢出到右邊或左邊（視direction屬性設置而定）的單元格。
二、相關屬性：
1.overflow-x:
overflow在水平方向上
2.overflow-y:
overflow在垂直方向上
3.text-overflow:
水平方向上,指定文字溢出時的顯示方式,對于省略標記出現哪一側由文字方向決定
1)可取值：
clip:文本溢出時不顯示省略標記（…），將溢出的部分裁切掉
ellipsis:文本溢出時顯示省略標記（…）
字符串：任何字符串（FF支持）
2)使用前提：
塊級元素
設置寬度(不設置以瀏覽器窗口寬度為準)
overflow:hidden;//溢出隱藏
white-space:nowrap;//禁止換行
3)說明:
a.當對容器設置浮動或者定位時，必須對容器設置寬度才能出現省略號
b.對于Firefox瀏覽器，可以給text-overflow設置溢出時顯示任意字符串來替換省略號，如text-overflow:”&&&”。
到此，關于“如何理解CSS屬性中的overflow及相關屬性text-overflow”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
