JavaScript - CSSレイアウトの問題、フレックスを使用できます

Question

• デザイン ドラフトは次のようになります。垂直方向と水平方向の中央に配置された 1 ～ 6 個の単語をサポートしています。

• テキストと画像は読み取りインターフェイスから取得されます。

• ここで難しいのが、4文字の場合は2文字折り返し、5文字の場合は2文字折り返し、下に3文字があり、6文字の場合は3文字折り返しとなります。 。テキスト領域の範囲を制限する場合は、最初に上の 3 文字、次に下の 2 文字にする必要があります。
  この問題の解決を手伝ってくれるレイアウトの専門家はいますか?

Answer 1

この関数を呼び出してテキストを処理します

リーリー

Answer 2

テキストと写真はすべてインターフェイスから取得されています

それではjsで直接論理的な判断をするのですが、なぜcssを使って解決する必要があるのでしょうか

Answer 3

スタイル設定

リーリー

次に、取得したデータでテキストの長さを決定し、2 つ以上の場合は 2 番目のテキストの後に改行文字を追加します。

Answer 4

垂直方向と水平方向にフレックスを使用して、テキストのサイズを個別に設定します

Answer 5

jsで改行文字を追加

Answer 6

wrap-reverse は 1 行目と 2 行目を反転できます