CSS中省略號是一種常用的樣式效果,可以用于截?cái)噙^長的文本,在界面上只顯示部分內(nèi)容,同時(shí)在文本末尾加上省略號。
省略號的寫法主要有兩種,分別是單行文本溢出的省略號和多行文本溢出的省略號。
/* 單行文本溢出省略號 */ .single-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 多行文本溢出省略號 */ .multi-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 顯示行數(shù) */ overflow: hidden; text-overflow: ellipsis; }
單行文本溢出省略號需要設(shè)置三個(gè)樣式屬性,分別是overflow、text-overflow和white-space。其中overflow用于控制文本內(nèi)容超出容器大小時(shí)的顯示情況,text-overflow則用于控制文本末尾部分的省略號,white-space則用于控制文本在容器中顯示的方式。
多行文本溢出省略號則需要借助-webkit-box系列樣式屬性來實(shí)現(xiàn),其中-webkit-box-orient用于控制文本排列方向,-webkit-line-clamp用于控制顯示的行數(shù),overflow和text-overflow則用于控制文本超出部分的省略號。
以上是CSS中省略號的寫法和應(yīng)用方法,可以根據(jù)具體情況選擇單行或多行文本溢出省略號,從而實(shí)現(xiàn)更好的樣式效果。