WeChatアプレットのスクロールビューの改行問題を解決する

今日、小さなプログラムを書いていたときに、スクロールビューを使用したのですが、スクロールビュー内のテキストの行が折り返せないことに気付きました。コードは次のとおりです。

<スクロールビュー scroll-y スタイル="幅:100rpx;高さ:100rpx;">
asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkajsdhasjdaksj
</スクロールビュー>

スクロールビューで英語の大きな段落が1行でしか表示されず、幅を超えた部分を非表示にできないことがわかった

解決する

ミニプログラムのスクロールビューでテキストが折り返されない問題についてオンラインで検索した後、ミニプログラムコンポーネントにはデフォルトスタイル white-space: nowrap; があり、デフォルトでは折り返されないことがわかったので、 white-space:normal !important; を追加してデフォルトスタイルを上書きしましたが、追加しても機能しませんでした。そこで、テキストの折り返しを再度検索したところ、一般的なテキストの折り返しには word-break: break-all; を追加するとよいことがわかりました。追加すると、機能することがわかりました。

単語区切り

私はプロのフロントエンド開発者ではないので（資格を持ったフロントエンドエンジニアになるために頑張っています）、word-break の使い方を調べてみました。以下は私の理解です。間違いがあればご指摘ください。

構文: word-break : normal | break-all | keep-all

パラメータ:

通常: アジア言語と非アジア言語のテキスト規則によると、単語内での改行が許可されています。上記の例には改行がありません。英語ではスペースを使用して改行するかどうかを決定するためです。例では、スペースのない長い英語の文字列があるため、改行はありません。途中でスペースを追加すると、行はスペースで分割されます。中国語では、各漢字は独立した個体であり、各文字を改行マーカーとして使用できます。

break-all : この動作は、アジア言語の場合の通常の動作と同じです。また、アジア以外の言語のテキスト行内で任意の単語の区切りを許可します。この値は、非アジア言語のテキストを含むアジア言語のテキストに適しています。この値は、単一の英語の文字を独立した文字として判断し、各英語の文字を改行として使用できます。

keep-all : アジア以外の言語の場合は通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア言語テキストを含む非アジア言語テキストに適しています

要約する

上記は、WeChat アプレットのスクロールビューの改行問題を解決する方法についてご紹介したものです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。