在網(wǎng)頁(yè)設(shè)計(jì)中，經(jīng)常需要精確控制文字的顯示，包括文字的樣式、大小、對(duì)齊方式等等。有時(shí)候我們還需要控制一段文字顯示的行數(shù)，以適應(yīng)設(shè)計(jì)要求。

CSS提供了一個(gè)非常方便的屬性來(lái)控制文字顯示的行數(shù)，那就是text-overflow:ellipsis;。通過設(shè)置這個(gè)屬性，即使一段文字很長(zhǎng)，只要指定了顯示的行數(shù)，多余的部分就會(huì)自動(dòng)截?cái)啵檬÷蕴?hào)（...）代替。

/* 定義顯示兩行文字的樣式 */
.two-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}

在上面的樣式中，display: -webkit-box;被用來(lái)聲明一個(gè)彈性盒子，-webkit-box-orient: vertical;表示彈性盒子垂直方向排列，-webkit-line-clamp: 2;規(guī)定顯示的行數(shù)，這里是兩行，overflow: hidden;是為了隱藏截?cái)嗪蟮亩嘤嗖糠郑乐垢蓴_布局。最后，text-overflow: ellipsis;實(shí)現(xiàn)省略號(hào)的效果。

需要注意的是，這種方式只在WebKit（Safari，Chrome）引擎的瀏覽器中生效，其他瀏覽器需要設(shè)置一些兼容性樣式才能實(shí)現(xiàn)相同的效果。