单行长度过长显示为省略号

今天get 了css新样式：

控制一行一行的文本如果太长，就用省略号显示：

样式如下：

 .myStyle{width:160px;height:50px;line-height:50px;border:4px solid #eee;
        white-space:nowrap;/*强制文本在一行内显示*/
        text-overflow:ellipsis; /*溢出省略号，支持ie、safari（webkit）*/
        -o-text-overflow:ellipsis; /*溢出省略号，支持opera*/
        overflow:hidden;/*溢出隐藏*/
        -moz-binding:url('ellipsis.xml#ellipsis');/*溢出省略号，支持firefox*/}

<body>
    <div class="myStyle">文本长了就省略号显示文本长了就省略号显示文本长了就省略号显示</div>
</body>

显示效果如下：

posted on 2015-10-13 18:54 视频阅读(257) 评论(0) 收藏举报