在網(wǎng)頁設(shè)計(jì)過程中，文字的長(zhǎng)度和排版是非常重要的，過長(zhǎng)或過短的文字都會(huì)給用戶造成不好的使用體驗(yàn)。而CSS中有一個(gè)非常重要的屬性——text-overflow，它可以用來控制文字最大長(zhǎng)度截取。

text-overflow的常用屬性有兩個(gè)，分別是ellipsis和clip。其中，ellipsis會(huì)在超出最大長(zhǎng)度時(shí)，將多余的部分用省略號(hào)表示，而clip則是直接將多余部分裁剪掉。

/* 使用ellipsis表示超出長(zhǎng)度用省略號(hào)表示 */
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 必須加上此屬性，否則省略號(hào)后面會(huì)空出一段空白 */
}
/* 使用clip表示超出長(zhǎng)度直接裁剪掉 */
.text {
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
}

需要注意的是，text-overflow只對(duì)單行文字有效，如果需要控制多行文字，可以結(jié)合使用overflow和display屬性。

/* 控制多行文字，超出長(zhǎng)度用省略號(hào)表示 */
.text {
display: -webkit-box;
-webkit-line-clamp: 2; /* 表示最多顯示兩行 */
-webkit-box-orient: vertical; /* 必須加上此屬性，否則不會(huì)折行 */
overflow: hidden;
text-overflow: ellipsis;
}

最后，需要注意的是，text-overflow并不能很好地處理中英文混排的情況。由于中文的字符占位和英文不同，所以在使用text-overflow時(shí)，需要設(shè)置中英文的最大寬度不同才能較好的顯示省略號(hào)。