学习笔记——CSS中word-break与word-wrap属性

---

在书写CSS样式时，可能会遇到长文本不换行问题。使用以上两个属性可以解决大部分的问题。

1. word-break:

word-break属性规定了自动换行的处理规则。

<!-- 固定的模板 view相当于div -->
<view>
    <view class="text" style="width: 250px ">
	    11111111111,1asdasjdia,sjdioneoen,ee1231112121,,ad,a,sd
	</view>
</view>

1.1 normal：浏览器的默认换行规则

1.2 break-all：允许在单词内换行

强烈的折行要求，不会产生多余的空白

1.3 keep-all：只能在半角空格或连字符处换行。

2.word-wrap:

word-wrap 属性允许长单词或 URL 地址换行到下一行。

 2.1 normal：浏览器的默认换行规则

2.2 break-word：不会把单词拆开换行

不太强烈的折行要求，本行放不下的单词会在下一行显示，会产生多余的空白

---