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

爱思考的猪

已于 2022-04-20 23:38:57 修改

阅读量8.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css html 前端 html5

于 2022-04-20 23:36:45 首次发布

本文链接：https://blog.csdn.net/qq_44621394/article/details/124310133

前端专栏收录该内容

57 篇文章

订阅专栏

本文介绍了如何使用CSS实现文字超出隐藏，通过设置`width`、`overflow`、`white-space`和`text-overflow`属性，可以创建一个文字省略的效果。同时，当遇到文字不换行的情况，可以通过移除或修改`white-space`和`word-break`属性来恢复正常换行。这些技巧对于网页布局和文本显示至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

	<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