美文网首页Web 前端开发 让前端飞
文字不回行,多余的字符显示省略号

文字不回行,多余的字符显示省略号

作者: 砚婉儿 | 来源:发表于2017-03-27 16:20 被阅读0次
    li{ 
       width:50px; 
       white-space:nowrap; 
       text-overflow:ellipsis; 
       overflow: hidden; 
    }
    

    首先是一个容器,可以是div,li,td等等,先定义宽度。
    white-space:nowrap;是强制在一行内显示所有文本,不回行。
    text-overflow:ellipsis;就是关键了。text-overflow是CSS3新增的属性,IE6以上版本支持。它可以带2个参数:clip [不显示省略标记(...),而是简单的裁切],ellipsis[当对象内文本溢出时显示省略标记(...)]。
    overflow:hidden;,让多余文字在ff中隐藏,为了支持Firefox。

    虽然打到了效果,但是因为用程序控制这种效果也很方便,而且没有浏览器兼容性的问题,所以用CSS控制的方法就显得鸡肋了。

    …………END…………

    谢谢支持,喜欢就点个❤

    相关文章

      网友评论

        本文标题:文字不回行,多余的字符显示省略号

        本文链接:https://www.haomeiwen.com/subject/nnyrottx.html