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

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控制的方法就显得鸡肋了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容