display:-webkit-box的问题

今天在写css的时候碰到了一个小问题

我在浏览器中调试制作的网页布局,显示的特效和功能都可以正常显示

而在真正的移动设备上, 触发了超过范围显示省略号的盒子的高度会比没有超过的盒子(总字数没超过限制), 就是这么一点点的高度就会让css混乱,

此时我的css样式为

.special_reco_posts b{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
    margin-top: 10px;

    margin-bottom: 10px;
    width:95%;
}

琢磨了很久终于找到了解决办法, 把样式改为下面的, 猜测是因为display:-webkit-box的问题(而且只会在真正的移动设备中才会触发)

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

margin-top: 10px;
margin-bottom: 10px;
width:100%;
display: block;

然后显示就正常了