CSS的多行文字截取是前端開發(fā)中常見的技巧，它可以幫助我們實(shí)現(xiàn)在容器中顯示固定行數(shù)的文本，多余的文本則會(huì)被省略并添加省略號(hào)。這個(gè)效果可以通過CSS的text-overflow和white-space屬性實(shí)現(xiàn)。

.example {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

上面的代碼實(shí)現(xiàn)了一個(gè)在容器中顯示3行文字的效果，并且多余的文本會(huì)被省略，省略號(hào)會(huì)自動(dòng)添加到文本的結(jié)尾。

其中，-webkit-box-orient: vertical;屬性表示文本將沿垂直方向排列，-webkit-line-clamp: 3;表示顯示三行文字，-webkit-box屬性將元素轉(zhuǎn)換為基于彈性盒子的布局，同時(shí)限制每行文字的數(shù)量。overflow:hidden;會(huì)將超出容器的文本隱藏起來，而text-overflow: ellipsis;則會(huì)在文本結(jié)尾添加省略號(hào)。

需要注意的是，這個(gè)效果只在支持WebKit內(nèi)核的瀏覽器上生效，如果要兼容其他瀏覽器，需要使用其他的屬性實(shí)現(xiàn)。

.example {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -moz-box;
-moz-line-clamp: 3;
-moz-box-orient: vertical;
display: box;
line-clamp: 3;
box-orient: vertical;
}

上面的代碼則同時(shí)兼容了WebKit和Moz內(nèi)核的瀏覽器，并且實(shí)現(xiàn)了相同的效果。