CSS中,默認(rèn)情況下省略號會居中顯示在文本內(nèi)容的末尾。但是很多時候,我們希望省略號不是居中對齊,而是對齊文本的左側(cè)或右側(cè)。那么,CSS有沒有辦法實(shí)現(xiàn)這一點(diǎn)呢?
/* 讓省略號對齊左側(cè) */
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
direction:rtl; /* 注意:這里要設(shè)置文本方向?yàn)橛蚁蜃?*/
/* 讓省略號對齊右側(cè) */
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
text-align: right;
以上代碼分別實(shí)現(xiàn)了讓省略號對齊左側(cè)和右側(cè)的方式。在實(shí)際應(yīng)用中,我們可以根據(jù)實(shí)際需要選擇其中一種方式進(jìn)行處理。
總之,CSS確實(shí)可以實(shí)現(xiàn)讓省略號不居中對齊的效果。需要注意的是,在實(shí)現(xiàn)向左對齊的時候,需要將文本方向設(shè)置為右向左,否則會出現(xiàn)異常的對齊效果。