IE内核情况下解决line-height不兼容的问题(如,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”部分溢出出现省略号,<font color="red" border="1px solid red ">span</font> 标签位于右边;基于我写的这种结构,在非ie内核上是没有任何问题的,是可以出现所需要的效果的;
但是呢在edge 和360安全浏览器都出现了问题(没办法,甲方爸爸就喜欢用这些ie呀360呀o(╥﹏╥)o)
看看就是这种效果,为什么不是同一条消息呢,那是因为那一条消息已经不知道掉到哪里去了o(╥﹏╥)o,百度了很多,有说将line-height设置为0,加padding的,没有用呀,字都只有半截,这不一样凉凉的节奏,当然加前缀的这个也是没有用的,没办法只能改变策略了,
<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;
}
给第一个span也加上绝对定位,然他们一起脱离文档流,这样就不用担心了;其实我感觉这样有点避重就轻,另辟蹊径来解决这个问题,但是没办法呀,我目前只能想到这个法子,去解决甲方爸爸的问题了。
当然如果你们不需要超出部分显示省略号的话,还是有一种方法的
p {
width: 394px;
overflow: hidden;/*必须要加哦,不加在谷歌会出现一些问题*/
/*white-space: nowrap;
text-overflow:ellipsis;*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
采用多行的超出省略的方法写,但是呢,
超出的办法在ie的情况就没办法解决了,这明显不符合我们甲方爸爸的需求,所以这适合没那么多话需求的方法;