CSS 中的長度屬性可以有不同的表示方式。在實(shí)際開發(fā)中,我們有時(shí)候需要將一些長的文本或者元素的寬度或高度限制在一定的范圍內(nèi),這時(shí)候就需要用到 CSS 中的省略號屬性。
省略號屬性可以使用在多種場合中,例如超出元素寬度或者高度的文本或者圖片,或者是在移動(dòng)端設(shè)備上顯示的縮略圖。省略號可以用以下幾種方式來實(shí)現(xiàn):
.text-ellipsis { display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .img-ellipsis { max-width: 100%; height: auto; display: block; overflow: hidden; }
以上代碼分別展現(xiàn)了如何在文本和圖片上應(yīng)用省略號。其中,用于文本的樣式設(shè)置了元素的 display 屬性為 block,然后使用 text-overflow 屬性來設(shè)置省略號的顯示,并通過 white-space 屬性來控制文本不換行,然后再通過 overflow 屬性來隱藏溢出部分;而用于圖片的樣式及非常簡單,只需要對 max-width 屬性進(jìn)行設(shè)置,然后將 overflow 屬性設(shè)置為 hidden 即可。
總的來說,省略號的實(shí)現(xiàn)方式相對簡單,但要注意一些細(xì)節(jié),例如在移動(dòng)端設(shè)備上使用時(shí)需要考慮到不同的屏幕分辨率和大小,避免出現(xiàn)樣式失調(diào)的情況。
上一篇css 長方形里三角
下一篇mysql檢索長度