文字溢出用.......表示

在项目中由于布局的要求，有的元素固定了宽高，此时文本元素可能溢出，怎么破？

当然网上已经有了很多方法解决此问题啦，下面简单介绍下用css和js解决此问题。

1.利用css的width,overflow,white-space和text-overflow来实现溢出部分用.....来代替。

你可以这么写：

body{
	font-size:1em;
}
#test{
	word-wrap:normal;
	width:20em;
	height:1em;
	white-space:nowrap;
	line-height: 1em;
	font-size:1em;
	overflow:hidden;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
	
}

<div id="test">
这是一段很长的文字，所以可能会语出这是一段很长的文字，所以可能这是一段很长的文字，所以可能这是一段很长的文字，所以可能这是一段很长的文字，所以可能
</div>

效果图:

可以看到设置了width,white-space为nowrap,overflow为hidden,text-overflow为ellipsis。还设置了word-warp为normal,是为了兼容IE8的，详细看这点击打开链接

2.js解决问题。

  基本原理就是求文本则字串，然后利用元素的innerHTML就可实现。

下面是jq实现.

window.οnlοad=function(){
     var width=19;
    $('#test').html($('#test').text().substring(0,width)+'...');
}

效果：