CSS中省略號是一個非常有用的樣式效果,特別是在顯示長文本內容的情況下。通常,當文本內容超過一定長度時,我們可以使用省略號來代表省略的內容。下面我們介紹一下如何實現這個效果。
p { white-space: nowrap; /*禁止內容換行*/ overflow: hidden; /*隱藏超出容器大小的內容*/ text-overflow: ellipsis; /*用省略號代替超出容器大小的內容*/ }
上面的CSS代碼中,white-space: nowrap;
表示禁止文本的自動換行,overflow: hidden;
表示隱藏超出容器大小的內容,text-overflow: ellipsis;
表示用省略號代替超出容器大小的內容。
這種實現方法適用于單行文本內容,如果需要省略多行文本內容,可以使用-webkit-box-orient: vertical;
和display: -webkit-box;
來實現。
p { /* 省略單行文本內容 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 省略多行文本內容 */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 控制顯示的行數 */ overflow: hidden; }
最后,需要注意的是,上述代碼中的-webkit-
前綴是為了兼容舊版本的瀏覽器和引擎,如果使用的是最新版本的瀏覽器,則可以省略前綴。
上一篇css實現豎排自適應排列
下一篇css實現矩形三角邊框