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

本文介绍了如何使用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>


PS:猿猿们,有什么其他的意见和建议给我留言呦!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值