小程序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的用法，下面是個人一些理解，若有錯誤，煩請指正

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

• 參數：

  • normal : 依照亞洲語言和非亞洲語言的文本規則，容許在字內換行上面我寫的例子沒有換行是由於英文是根據空格來判斷是否要換行的，例子中是一長串英文字符沒有空格，因此就沒有換行，在中間加上一個空格，就會在空格處進行換行，中文是每一個漢字都是一個獨立的個體，每一個字均可以做爲換行的標識
  • break-all ： 該行爲與亞洲語言的normal相同。也容許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本，這個值會將單個的英文字符斷定爲獨立的個體，每一個英文字符均可以做爲換行的表示
  • keep-all :與全部非亞洲語言的normal相同。對於中文，韓文，日文，不容許字斷開。適合包含少許亞洲文本的非亞洲文本