無(wú)關(guān)緊要的前言
之前開(kāi)發(fā)遇到問(wèn)題都是隨手記錄在紙上或本子上，后期翻閱、查看總是有各種問(wèn)題，所以決定也開(kāi)始編寫(xiě)自己的博客，當(dāng)作一個(gè)在線筆記本，以便自己復(fù)習(xí)。同時(shí)也希望能給其他人帶來(lái)一些幫助。
問(wèn)題描述
最近在IE8中遇到一個(gè)奇怪的問(wèn)題，就是在ie8的ie8文本模式下，文本內(nèi)容超長(zhǎng)顯示“...”，出現(xiàn)“...”與文本內(nèi)容重疊的現(xiàn)象，且"..."的展現(xiàn)形式為與期待的有所不同，會(huì)垂直居中。（此時(shí)電腦系統(tǒng)為WIN10，ietester不能正常打開(kāi)網(wǎng)頁(yè)，就不粘截圖了，后續(xù)有機(jī)會(huì)再補(bǔ)充）
簡(jiǎn)單測(cè)試代碼
css內(nèi)容：
.label-warp{display: block;width:30px;}
.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
html內(nèi)容
<label class="label-warp ellipsis">請(qǐng)輸入您的用戶名：</label>
問(wèn)題解決過(guò)程：
1、通過(guò)設(shè)置寬度沒(méi)效果；總能找到恰好會(huì)重疊的樣例；
2、網(wǎng)上查詢(xún)相關(guān)問(wèn)題解決方案，未果；
3、發(fā)現(xiàn)同一頁(yè)面之下，有正常的情況，有異常的情況，對(duì)比當(dāng)前元素、父元素層層節(jié)點(diǎn)的樣式，仍然未解決問(wèn)題；
發(fā)現(xiàn)原因：
后偶然之間發(fā)現(xiàn)出現(xiàn)問(wèn)題的元素的內(nèi)容全部是以中文開(kāi)頭的，且‘...‘的展現(xiàn)形式偏向中文；
解決問(wèn)題：
發(fā)現(xiàn)原因之后的解決思路就是在內(nèi)容前面追加一個(gè)英文的空格，大體方案有三種；
1、在每個(gè)包含'ellipsis‘類(lèi)的元素的內(nèi)容前面添加" "
<label class="label-warp ellipsis"> 請(qǐng)輸入您的用戶名：</label>
2、需要修改項(xiàng)比較多時(shí)，可以通過(guò)js操作處理:
<!--此處采用了jquery-->
function init() {
<!--遍歷全部ellipsis類(lèi)，逐個(gè)添加英文空格-->
$('.ellipsis').each(function () {
var text = ' '+$(this).text();
$(this).html(text);
})
}
init();
3、采用css偽元素追加內(nèi)容（個(gè)人推薦該方法，注意：''之間有個(gè)空格）：
.ellipsis:before{content: ' ';}