css实现超出文本用省略号来表示

<div class="word">
	<span>ABCDEFGHIGKLMN</span>
</div>

我们创建一个盒子在里面加入文字,然后设置样式

.word{
	width:60px;/*固定盒子的大小*/
	height:30px;
	line-height:20px;/*允许文本占用20的高度*/
	word-wrap:nowrap;/*禁止文本自动换行*/
	overflow:hidden;/*将超出部分隐藏*/
	text-overflow:ellipsis;/*文本隐藏部分用省略号代替*/
}

• 注意必须先隐藏超出部分，才能使用省略号代替
  效果图：