Lösen Sie das Problem des Zeilenumbruchs in der Scroll-Ansicht des WeChat-Applets

Als ich heute ein kleines Programm schrieb, benutzte ich die Scroll-Ansicht, stellte jedoch fest, dass eine Textzeile in der Scroll-Ansicht nicht umbrochen werden konnte. Der Code lautet wie folgt:

<scroll-view scroll-y style="Breite:100rpx;Höhe:100rpx;">
asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkajsdhasjdaksj
</scroll-ansicht>

Ich habe festgestellt, dass ein großer englischer Absatz in der Scroll-Ansicht nur in einer Zeile angezeigt wird und der Teil, der die Breite überschreitet, nicht ausgeblendet werden kann

lösen

Nachdem ich online nach dem Problem gesucht hatte, dass Text in der Scroll-Ansicht von Miniprogrammen nicht umbrochen wird, fand ich heraus, dass die Miniprogrammkomponente einen Standardstil white-space: nowrap; hat, der standardmäßig nicht umbrochen wird, also fügte ich white-space:normal !important; hinzu, um seinen Standardstil zu überschreiben, aber es funktionierte nicht, nachdem ich es hinzugefügt hatte, also suchte ich erneut nach Textumbruch und fand heraus, dass allgemeiner Textumbruch word-break: break-all; hinzufügen würde. Nachdem ich es hinzugefügt hatte, stellte ich fest, dass es funktionierte

Wortumbruch

Da ich kein professioneller Frontend-Entwickler bin (ich arbeite hart daran, ein qualifizierter Frontend-Ingenieur zu werden), habe ich mir die Verwendung von Worttrennungen angesehen. Folgendes ist mein Verständnis. Wenn es Fehler gibt, korrigieren Sie mich bitte.

Syntax: Wörtertrennung: normal | alles umbrechen | alles behalten

Parameter:

normal: Gemäß den Textregeln asiatischer und nicht-asiatischer Sprachen sind Zeilenumbrüche innerhalb von Wörtern zulässig. Das Beispiel, das ich oben geschrieben habe, hat keine Zeilenumbrüche, da Englisch Leerzeichen verwendet, um zu bestimmen, ob ein Zeilenumbruch erfolgt. Im Beispiel gibt es eine lange Zeichenfolge englischer Zeichen ohne Leerzeichen, daher gibt es keinen Zeilenumbruch. Wenn in der Mitte ein Leerzeichen hinzugefügt wird, wird die Zeile an dem Leerzeichen umgebrochen. Im Chinesischen ist jedes chinesische Zeichen ein unabhängiges Individuum und jedes Zeichen kann als Zeilenumbruchmarkierung verwendet werden.

break-all: Dieses Verhalten ist das gleiche wie bei asiatischen Sprachen. Ermöglicht auch beliebige Wortumbrüche in Textzeilen für nicht-asiatische Sprachen. Dieser Wert ist für asiatischen Text geeignet, der nicht-asiatischen Text enthält. Dieser Wert beurteilt ein einzelnes englisches Zeichen als unabhängiges Individuum und jedes englische Zeichen kann als Zeilenumbruch verwendet werden.

keep-all: Wie normal für alle nicht-asiatischen Sprachen. Für Chinesisch, Koreanisch und Japanisch sind Worttrennungen nicht zulässig. Geeignet für nicht-asiatische Texte mit einem geringen Anteil asiatischer Texte

Zusammenfassen

Oben habe ich Ihnen die Lösung des Zeilenumbruchproblems in der Scroll-Ansicht im WeChat-Applet vorgestellt. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten!