background

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

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

It is found that a large section of The Scroll view is displayed on only one line, and the part beyond the width cannot be hidden

To solve

The scrollview component has a default style of white-space: nowrap; it has a default style of white-space: nowrap; The default is no line breaks, so I added white-space:normal! important; Word-break: break-all; word-break: break-all; word-break: break-all; I added it and it worked

word-break

Since I am not a professional front-end engineer (trying to become a qualified front-end engineer), I have specially read the usage of word-break, the following is my understanding, if there is any mistake, please correct

  • Grammar: word – break: normal | break – all | keep – all

  • Parameters:

    • normal : According to the text rules of Asia and the Asian languages, allowing a newline within the word I write the example above didn’t wrap because English is according to the space to determine whether to wrap, a case is a long list of English characters with no Spaces, so there is no line breaks, plus a space in the middle, and that will be in space for a line break, Chinese is every Chinese character is an independent individual, Each word can be used as a newline identifier
    • Break-all: This behavior is the same as normal in Asian languages. It also allows lines of text in non-Asian languages to break within any word. This value is suitable for Asian text that contains some non-Asian text. This value determines that individual English characters are independent, and each English character can be represented as a newline
    • Keep-all: same as normal in all non-Asian languages. For Chinese, Korean and Japanese, word breaking is not allowed. Suitable for non-Asian texts with a small amount of Asian text