CSS多余隱藏點點顯示是一種在頁面中顯示省略號的技巧,可在移動設備或限定屏幕寬度的情況下,隱藏過長的文本內容。下面介紹一種簡單的實現方法:
.text { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
其實,這段CSS代碼非常簡單,主要分為以下幾個部分:
- display:塊級顯示,與父元素寬度保持一致;
- width:元素寬度100%;
- white-space:控制是否折行;
- overflow:控制文本溢出后的處理方式;
- text-overflow:表示文本溢出時使用省略號來代表被修剪的文本。
通過以上設置屬性,就可以實現多余隱藏點點顯示的效果了。然而,若我們希望針對局部的文本內容實現這種效果,則需要添加一些其他的代碼。
.text { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text:before { display: inline-block; width: 3em; content: ""; } .text:after { content: "…"; position: absolute; right: 0; top: 0; }
在這段代碼中,使用:before 和 :after 偽元素,在文字之前、之后添加了兩個元素,從而實現了多余隱藏點點顯示的效果。
總之,使用 CSS 實現多余隱藏點點顯示,可以在美化頁面的同時,保證頁面排版的美觀與兼容性。
上一篇css多個after
下一篇css多出來的字隱藏