CSS中的文字截?cái)嗉夹g(shù)是Web開發(fā)中非常常用的技巧。特別是當(dāng)您的文章或標(biāo)題太長(zhǎng)時(shí)，用省略號(hào)進(jìn)行截?cái)嗫梢蕴岣唔?yè)面的可讀性。下面介紹兩種前端工程師常用的CSS超出文字省略的方法：

// 使用CSS常用的text-overflow屬性
.text-overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// text-overflow屬性剛剛介紹了，下面還有一種實(shí)現(xiàn)方式
.ellipsis {
display: inline-block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 100%;
}

上述實(shí)現(xiàn)方法有些差異性，第一種是設(shè)置overflow:hidden將多出來(lái)的文字進(jìn)行了隱藏，text-overflow：ellipsis則是將被隱藏的文字用省略號(hào)“…”代替。第二種方法直接在外層元素使用display:inline-block，再加上屬性white-space:nowrap，讓多出來(lái)的文字不進(jìn)行換行處理，這樣就可以達(dá)到截?cái)嗟哪康牧恕Ｈ绻奈淖忠诺絝loat類型的子元素中，可以將max-width：100%加上，以便適應(yīng)于各種長(zhǎng)度的文字。

至此，我們介紹了CSS中常用的超出文字省略號(hào)實(shí)現(xiàn)方法。您可以根據(jù)自己的頁(yè)面設(shè)計(jì)需求來(lái)選擇不同的方法進(jìn)行使用。