解決微信小程式scroll-view換行問題

今天在寫小程式的時候使用了scroll-view,但是發現在scroll-view中一行文字不能換行，程式碼如下：

 <scroll-view scroll-y style=width:100rpx;height:100rpx;>asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkajsdhasjdaksj</scroll-view>

發現scroll-view內的一大段英文只顯示在一行，超出寬度的部分不能被隱藏了

在網路上搜尋了一下小程式scroll-view文字不能換行的問題後，發現原來是小程式元件有一個預設的樣式white-space: nowrap; ,預設是不換行的，所以我就加入了white-space: normal !important; 來覆蓋它的預設樣式，但是事與願違，加上後還是不行，於是我又搜尋了文字換行，發現一般的文字換行都會加上word-break: break-all;我加上後發現確實可以了

由於我不是專業的前端(正努力成為一個合格的前端工程師)，所以我有特地看了一下word-break的用法，下面是我的一些理解，如有錯誤，煩請指正

語法：word-break : normal | break-all | keep-all

normal : 依照亞洲語言和非亞洲語言的文字規則，允許在字內換行上面我寫的例子沒有換行是因為英文是根據空格來判斷是否要換行的，例子中是一長串英文字符沒有空格，所以就沒有換行，在中間加上一個空格，就會在空格處進行換行，中文是每個漢字都是一個獨立的個體，每個字都可以作為換行的標識

break-all ： 此行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本，這個值會將單一的英文字元判定為獨立的個體，每個英文字元都可以作為換行的表示

keep-all :與所有非亞洲語言的normal相同。對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文本的非亞洲文本

以上所述是小編跟大家介紹的解決微信小程式scroll-view換行問題，希望對大家有幫助，如果大家有任何疑問歡迎給我留言，小編會及時回覆大家的！