html设置文字超出省略和超出换行

场景一 : 设置文字超出省略

	<style type="text/css">
			#wrap{
				width: 100px; //设置宽度
				overflow: hidden; //超出隐藏
				white-space: nowrap; //设置文字不换行
				text-overflow: ellipsis;//超出显示...
			}
		</style>
	
	<div id="wrap">
			这里是一行普通的文字这里是一行普通的文字这里是一行普通的文字
	</div>

通过上面的样式给行内元素和块级元素设置文字超出省略。特别注意的是一定要设置宽度。

场景二 设置文字换行显示

正常情况下文字超出元素所设置的宽度时会自动换行。但如果元素本身或者父元素(文字类型的属性会被子元素继承)设置的有white-space:nowrap或者word-break:kepp-all的时候文字就不会换行显示了。解决办法就算去掉该属性，或者将white-space和word-break都设置成normal