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

4 篇文章 0 订阅

前言:在一个长宽固定的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:猿猿们,有什么其他的意见和建议给我留言呦!

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值