CSS的兩行省略號是一種非常常用的文本截斷方式,它可以讓文本在固定寬度的容器內顯示省略號,讓頁面更加美觀。下面是實現兩行省略號的代碼:
.example { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
其中,overflow: hidden
用于隱藏超出容器的文本,text-overflow: ellipsis
用于顯示省略號,display: -webkit-box
和-webkit-box-orient: vertical
用于將文本按豎直方向排列,-webkit-line-clamp: 2
用于限制文本顯示的行數。
需要注意的是,這段代碼只對webkit核心瀏覽器(如Chrome、Safari等)有效,如果要兼容其他瀏覽器,可以使用以下代碼:
.example { overflow: hidden; text-overflow: ellipsis; display: -moz-box; -moz-box-orient: vertical; -moz-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: box; box-orient: vertical; line-clamp: 2; }
這樣就可以在大多數現代瀏覽器中實現兩行省略號了。