Solve the scroll-view line break problem of WeChat applet

Today, when I was writing a small program, I used scroll-view, but I found that a line of text in scroll-view could not wrap. The code is as follows:

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

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

solve

After searching online for the problem of text not wrapping in scroll-view of mini-programs, 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 did not work after adding it, so I searched for text wrapping again and found that general text wrapping would add word-break: break-all; After adding it, I found that it did work

word-break

Since I am not a professional front-end developer (I am working hard to become a qualified front-end engineer), I have taken a look at the usage of word-break. The following is my understanding. If there are any mistakes, please correct me.

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

parameter:

normal: According to the text rules of Asian 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. In the example, there is a long string of English characters without spaces, so there is no line break. If a space is added in the middle, the line will break at the space. In Chinese, each Chinese character is an independent individual, and each character can be used as a line break marker.

break-all : This behavior is the same as normal for Asian languages. Also allows arbitrary word breaks in lines of text for non-Asian languages. 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.

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

Summarize

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