Solve the problem of line wrapping in scroll-view of WeChat applet

Today I used scroll-view when writing a small program, but found that a line of text in scroll-view cannot be wrapped. The code is as follows:

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

I found that a large section of English in the scroll-view is only displayed on one line, and the part beyond the width cannot be hidden.

After searching on the Internet for the problem that the mini program scroll-view text cannot wrap, I found that the mini program component has a default style white-space: nowrap; , which does not wrap by default, so I added white-space: normal !important; to override its default style, but it backfired. After adding it, it still didn't work, so I searched for text line breaks and found that word-break: break-all; is usually added to text line breaks. After adding it, I found that it was indeed That's it

Since I am not a professional front-end (I am trying to become a qualified front-end engineer), I took a special look at the usage of word-break. Here are some of my understandings. If there are any mistakes, please correct me.

Syntax: word-break: normal | break-all | keep-all

normal: According to the text rules of Asian languages ​​and non-Asian languages, line breaks are allowed within words. The example I wrote above does not have line breaks because English uses spaces to determine whether to break lines. In the example, it is a long string of English characters without spaces, so There is no line break. If you add a space in the middle, the line break will be performed at the space. In Chinese, each Chinese character is an independent individual, and each character can be used as a line break mark.

break-all: This behavior is the same as normal for Asian languages. Breaks within any word of a line of non-Asian language text are also allowed. This value is suitable for Asian text that contains some non-Asian text. This value will judge a single English character as an independent individual, and each English character can be used as a line break representation.

keep-all : Same as normal for all non-Asian languages. For Chinese, Korean, and Japanese, word breaks are not allowed. Good for non-Asian text that contains a small amount of Asian text

The above is what the editor introduces to you to solve the scroll-view line wrapping problem of the WeChat applet. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time!