今天碰到了個(gè)問(wèn)題，view并不能讓文本自動(dòng)換行 
看看官方定義的view組件，原本的view定義的display為block。 
之前忘了在哪里看到小程序布局的時(shí)候用flex，所以涉及到了CSS3的display:flex。 
具體學(xué)習(xí)，看阮一峰老師的教程

看這次出現(xiàn)的問(wèn)題，是文字太長(zhǎng)被吃掉了，截圖：

依靠我多年的開(kāi)發(fā)經(jīng)驗(yàn)，試倒是被我試出來(lái)了，整理了一下思路，一般出現(xiàn)滾軸（在圖片或者文字片段中）是因?yàn)閣idth，display，（height，padding，margin），對(duì)于文字片段（這里只針對(duì)中文）實(shí)在不行就只能強(qiáng)制換行，例如flex-wrap:warp，white-space:pre-wrap。

然后考慮了以下幾種方法

• 首先，width是100%，如果涉及到padding就要注意width和padding-left以及padding-right的加減問(wèn)題
• 其次是height，一般除非固定了大小，不然我不會(huì)設(shè)置height，而是讓內(nèi)容填充起來(lái)高度之后，給它加上適當(dāng)?shù)膒adding-top和padding-bottom
• 另外是margin，這里并沒(méi)有用到就不說(shuō)了

方法一：放任不管，讓view保持原本的display為block（出現(xiàn)滾軸）

如果不去設(shè)置view的display，則會(huì)出現(xiàn)如圖的情況：

沒(méi)錯(cuò)又是滾軸，這次不是因?yàn)閳D片（圖片出現(xiàn)滾軸的問(wèn)題請(qǐng)參考這篇文章 scroll-view中，image組件出現(xiàn)滾軸）

方法二：view { display:block }，再采取強(qiáng)制換行white-space: pre-wrap;（其實(shí)是可以的，看個(gè)人的編程習(xí)慣）

（強(qiáng)制換行的鏈接看這個(gè)：css強(qiáng)制換行和超出隱藏實(shí)現(xiàn)） 
結(jié)果成這樣了

當(dāng)時(shí)的表情簡(jiǎn)直就是， 哪來(lái)的這么大的空隙?。≌{(diào)line-height肯定不對(duì)，但是pre-wrap里面又沒(méi)找到padding或者margin之類(lèi)的東西。

會(huì)不會(huì)是display的問(wèn)題，于是有了方法三。

方法三：view { display:flex }，再加上css3的flex-wrap:wrap;flex-direction:row;（不起作用）

第一步，先將view的display轉(zhuǎn)為flex； 
第二步，設(shè)置view的flex-wrap:wrap; 
中規(guī)中矩的寫(xiě)完，然鵝沒(méi)有什么用。。 

會(huì)不會(huì)是因?yàn)檫€要flex-direction:row;？然鵝加上去還是沒(méi)用

后來(lái)找到資料（雖然和這個(gè)有點(diǎn)相似但是不一樣的問(wèn)題，資料是這個(gè)：微信小程序 scroll-view flex-wrap 失效問(wèn)題），有人在評(píng)論中提到在scroll-view中，display:flex是沒(méi)有用的，所以就排除display的問(wèn)題了。 
既然display沒(méi)問(wèn)題，就有了方法四。

方法四：view { display:block }，再采取強(qiáng)制換行white-space: pre-line;（看個(gè)人的編程習(xí)慣）

首先得解釋?zhuān)裁词莗re-line，參考文檔：white-space 
對(duì)比一下方法二的white-space:pre-wrap和方法四的white-space:pre-line

white-space取值	描述	圖片	new lines （新的一行）	Spaces and tabs （空格和tab）	Text wrapping （文字環(huán)繞）
normal	Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.		Collapse （奔潰，也就是沒(méi)有新的一行）	Collapse （奔潰，也就是沒(méi)有空格和tab）	Wrap （環(huán)繞）
pre-wrap	Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes. （保留空白，像<br>標(biāo)簽一樣換行，去填充盒子）		Preserve （保存，也就是會(huì)有新的一行）	Preserve （保存，也就是會(huì)有空格和tab）	Wrap （環(huán)繞）
pre-line	Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes. （不保留空白，像<br>標(biāo)簽一樣換行，去填充盒子）		Preserve （保存，也就是會(huì)有新的一行）	Collapse （奔潰，也就是沒(méi)有空格和tab）	Wrap （環(huán)繞）

對(duì)比方法二和方法四，說(shuō)是編程習(xí)慣的問(wèn)題，如圖 

標(biāo)簽和文字之間換行： 

標(biāo)簽和文字之間不換行： 

所以方法二使用pre-wrap之所以會(huì)出現(xiàn)那么大的一片空白，就是因?yàn)樗Ａ艨瞻缀蛅ab。但是方法四pre-line就會(huì)去除空白和tab。

對(duì)于個(gè)人的編程習(xí)慣，因?yàn)槲淖植淮_定多少的問(wèn)題，我是標(biāo)簽中間加文字，同時(shí)會(huì)換行，所以我這里使用的是方法四的white-space:pre-line; 

接下來(lái)為了美觀，就是調(diào)一下line-height和padding的問(wèn)題了。最后效果： 

結(jié)論就是，scroll-view中，設(shè)置display:flex是沒(méi)不起作用的

中文文字片段在view中不能換行的問(wèn)題，要使用強(qiáng)制換行，至于是使用white-space:pre-line（不會(huì)保留空白和tabs），還是white-space:pre-wrap（會(huì)保留空白和tabs），就要看個(gè)人的編程習(xí)慣了