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

我们都知道p标签是行内元素,p标签中的文字默认会显示一行,如果超出外层容器的宽度会换行显示。场景一 : 设置文字超出省略<style type="text/css">#wrap{width: 100px; //设置宽度overflow: hidden; //超出隐藏white-space: nowrap; //设置元素不还行text-overflow: ellipsis;//超出显示.

爱思考的猪

8657人浏览 · 2022-04-20 23:36:45

爱思考的猪 · 2022-04-20 23:36:45 发布

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

	<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