css属性：word-wrap:break-word; 与 word-break:break-all 的用法；

zhangq0123

于 2016-10-19 11:06:12 发布

阅读量7.3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： CSS HTML 文章标签： html css

本文链接：https://blog.youkuaiyun.com/zhangq0123/article/details/52857092

CSS 同时被 2 个专栏收录

8 篇文章

订阅专栏

HTML

4 篇文章

订阅专栏

本文介绍了如何使用CSS属性word-wrap和word-break来控制长单词在固定尺寸容器内的换行方式，包括只对超出容器宽度的单词进行拆分，或者拆分所有单词。

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

前言：在一个长宽固定的div容器中，多行文字和英文句子都默认自动换行。不过，对于英语单词而言，会有一些微妙的变化！

//没有添加word-wrap:break-word和word-break:break-all时
	
<div style="width:150px;height:70px;background:red;">
     I am a good boy, hahahahhahahahahahaha everyone likes me...
</div>

//添加word-wrap:break-word时(只对那些超出容器宽度的单词进行拆分，而不影响其他正常单词。)
		
	<div style="width:150px;height:70px;background:red;word-wrap:break-word">
	   I am a good boy, hahahahhahahahahahaha everyone likes me...
	</div>

//添加word-break:break-all时(拆分所有单词)

	<div style="width:150px;height:70px;background:red;word-break:break-all">
	   I am a good boy, hahahahhahahahahahaha everyone very likes me...
	</div></span>