详解:34word-wrap

兄弟们,你们看着啊总结:核心:截断
word-wrap: break-word;也可以写成overflow-wrap: break-word;一样的哈,
word-break: break-all;核心是:内容在宽度的邻界点就自动换行了哈(注意点,也就是说宽度邻界点那里放不下将要显示在这里的字符就换航了呀注意点来了,单词呢怎么说?也截断,放不下的汉子和单词都截断
效果:在这里插入图片描述

在这里插入图片描述
第二个:word-break: break-all;核心是:到邻界点了意思也就是说到边上了呀,截断它。就算是一个单词写没完也截断
效果:在这里插入图片描述那上面两个有什么不同?overflow-wrap: break-word;与word-break: break-all;有什么不同
我觉得就是上一行被截断的下一行写下一个单词之后就会换行,我的理解是可能这就是这就是作用把,
就是说截图的下一行只会出现一个单词。

第三个:word-break:keep-all;核心是不许单词断开,汉子是不许不到,逗号就断开,如果装不下就破掉它,只要到一个标点符号或者一个单词写完并且到临界点就可以换行哈
效果:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>word-wrap</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<style type="text/css">
		div{
			width: 100px;
			border:1px solid red;
			margin:100px;
			/*word-wrap: break-word;*/
			/*overflow-wrap: break-word;*/
			/*word-break: break-all;*/
			word-break:keep-all;
		}
	</style>
</head>
<body>
<div>
我不是神马技术大婶,也不是神马砖家,我和你们一样,是在技术这个道路上不断努力的小菜鸟…
但我希望你们听了我的课程会有一些收获,哪怕在技术上对你有一点点的帮助,我就满足了…
敲好每一行代码,讲好每一堂课程
</div>
<div>
JSONP(JSON with Padding)JSONP(JSON with Padding)JSONP(JSON with Padding)JSONP(JSON with Padding)JSONP(JSON with Padding)JSONP(JSON with Padding)JSONP(JSON with Padding)
</div>
<div>
出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果。 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取
</div>
<div>
	My Blog URL: http://phpfamily.org/?p=1&cate=2&c=3
</div>
<div>
	this is a testttttttttttttttttttttttt
</div>
</body>
</html>

在这里插入图片描述

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贵哥的编程之路(热爱分享)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值