文本溢出显示省略标记'...'的bug

常用css方法：

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

注意事项：

　　1)只适用于块属性元素（或者给行内元素设置display:block;）。

　　2)当元素浮动时，不会显示'...'，解决方法是给元素设置width:100%；或者固定的宽度。

　　3)火狐中的bug：当用弹性盒模型布局时，布局的子元素设置此方法不起作用。

　　　　解决方法：不用弹性盒模型布局。

　　　　或者采用别的方法来实现'...'，如下列方法（margin负值定位法）：

    <style type="text/css">
        .outer{width:100%; height:1em; overflow:hidden; }
        .outer .con{float:left; height:1em; margin-right:1em; overflow:hidden;}
        .outer .dotted{height:1em; float:right; margin-top:-1em;}
    </style>
    <body>
        <div class="outer" >
            <div class="con" >调整窗口大小，看看是不是会省略号省略号省略号省略号省略号省略号省略号省略号省略号省略号</div>
            <div class="dotted" >…</div>
        </div>
    </body>

 

 

参考：http://www.zhangxinxu.com/study/200909/text-overflow-ellipsis-so-on.html

 

posted on 2013-04-25 16:24  挨踢前端  阅读(671)  评论(0)  编辑  收藏  举报

导航