在 web 頁面中,經(jīng)常會(huì)出現(xiàn)一些需要控制文本排版的情況,其中之一就是需要控制某個(gè)容器的第一排字?jǐn)?shù)換行。而 CSS 可以幫助我們實(shí)現(xiàn)這一效果。
.container { width: 500px; font-size: 16px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
上述 CSS 代碼實(shí)現(xiàn)了一個(gè)容器的第一排字?jǐn)?shù)換行,將超出一定范圍的文本截?cái)啵⒃诮Y(jié)尾添加省略號(hào)。其中,width
屬性指定了容器的寬度,font-size
屬性指定了字體大小,line-height
屬性指定了行高。
接下來,我們使用overflow
屬性指定了元素內(nèi)容的溢出如何處理。這里我們將溢出的文本進(jìn)行隱藏和省略,使用text-overflow: ellipsis;
屬性實(shí)現(xiàn)文本省略號(hào)的顯示。
最關(guān)鍵的部分在于通過設(shè)置display: -webkit-box;
屬性和-webkit-line-clamp: 2;
屬性限制容器內(nèi)只顯示兩行內(nèi)容。同時(shí),我們需要通過-webkit-box-orient: vertical;
屬性實(shí)現(xiàn)塊容器的水平類型。
除了上述 CSS 樣式,還需要注意的是,這種排版方式在一些老舊的瀏覽器上可能存在相對(duì)應(yīng)的兼容性問題。在使用時(shí)需要多瀏覽器測試。