IE內(nèi)核情況下解決line-height不兼容的問(wèn)題（如，360安全瀏覽器犹芹、edge ）
<li>
<p>
xxxxxxxxxxx <span></span>
</p>
</li>
li {
list-style: disc;
font-size: 16px;
position: relative;
line-height: 48px \9; /*IE8*/
*line-height: 48px; /*IE7*/
_line-height: 48px; /*IE6支持*/
-moz-line-height: 48px; /*Firefox*/
-ms-line-height: 48px; /*IE9+*/
line-height: 48px;
}
li p {
width: 394px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
li p span {
position: absolute;
right: 0;
top:0;
display: inline-block;
font-size:14px;
}
我需要的是“xxxxx”部分溢出出現(xiàn)省略號(hào)，<font color="red" border="1px solid red ">span</font> 標(biāo)簽位于右邊鞠绰；基于我寫(xiě)的這種結(jié)構(gòu)腰埂，在非ie內(nèi)核上是沒(méi)有任何問(wèn)題的，是可以出現(xiàn)所需要的效果的蜈膨；
但是呢在edge 和360安全瀏覽器都出現(xiàn)了問(wèn)題（沒(méi)辦法屿笼，甲方爸爸就喜歡用這些ie呀360呀o(╥﹏╥)o）
看看就是這種效果，為什么不是同一條消息呢翁巍，那是因?yàn)槟且粭l消息已經(jīng)不知道掉到哪里去了o(╥﹏╥)o驴一，百度了很多，有說(shuō)將line-height設(shè)置為0灶壶，加padding的肝断，沒(méi)有用呀，字都只有半截驰凛，這不一樣涼涼的節(jié)奏胸懈，當(dāng)然加前綴的這個(gè)也是沒(méi)有用的，沒(méi)辦法只能改變策略了恰响，
<li>
<p>
<span>XXXXXXXXXX</span> <span></span>
</p>
</li>
li p span:first-child {
position: absolute;
left:0;
top:0;
width: 394px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
給第一個(gè)span也加上絕對(duì)定位趣钱，然他們一起脫離文檔流，這樣就不用擔(dān)心了胚宦；其實(shí)我感覺(jué)這樣有點(diǎn)避重就輕首有，另辟蹊徑來(lái)解決這個(gè)問(wèn)題燕垃，但是沒(méi)辦法呀，我目前只能想到這個(gè)法子井联，去解決甲方爸爸的問(wèn)題了利术。
當(dāng)然如果你們不需要超出部分顯示省略號(hào)的話(huà)，還是有一種方法的
p {
width: 394px;
overflow: hidden;/*必須要加哦低矮，不加在谷歌會(huì)出現(xiàn)一些問(wèn)題*/
/*white-space: nowrap;
text-overflow:ellipsis;*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
采用多行的超出省略的方法寫(xiě)印叁，但是呢，
超出的辦法在ie的情況就沒(méi)辦法解決了军掂，這明顯不符合我們甲方爸爸的需求轮蜕，所以這適合沒(méi)那么多話(huà)需求的方法；
