Q&A

FLEX MESSAGE SIMULATOR コンポーネントでタグリストを作成したい

前提・実現したいこと

FLEX MESSAGE SIMULATOR で boxコンポーネント[horizontal]の中にbox+textを複数横並びに配置し、タグリストのような表現をしたいと考えております。可能かどうか、また、可能な場合は実現方法をご教示ください。

発生している問題・エラーメッセージ

box+textの文字数は均等ではなく、外側のboxコンポーネント幅に入りきらない場合は、改行して下の行に表示したいのですが、現状では改行せずはみ出した部分のみ非表示となります(box内では行数が1行となっておりはみだしたタグが途中までしか表示されない)

該当のソースコード

試したこと

※()内プロパティは重要そうなもののみ表記

box [horizontal] (justifyContent:flex-start)  ├ box [vertical] (flex:0)  │ └A text [テキスト](wrap:true)  ├ box [vertical](flex:0)  │ └A text [テキストテキスト](wrap:true)  ├ box [vertical](flex:0)※    └A text [テキストテキストテキスト] (wrap:true)

2番目のbox [vertical] までは表示されるが、3番目のboxは改行せず外boxからはみ出した部分が非表示になります(cssでいうとoverflow:hidden的な表示になります)。この場合、3番目のboxから自動で改行できる方法を知りたいです。


いろいろプロパティを触ってみましたが今のところ実現できていません。 どなたか詳しい方がいらっしゃいましたらアドバイスくださいますようお願いします。

---2021.2.10追記--- 説明画像を作成していましたがこちらに直接アップできなかったため外部リンクをお知らせします。 こちらの図の下図のようにテキストの文字数が多くなったり、横並びにするタグリストの数が増えても、外側のboxの中からはみ出さずに表示する方法はあるでしょうか。 https://gyazo.com/89151e8a0108c46a42e194c898fb05b9

---2021.2.13追記--- 実現策はなさそうですが、もう少しの間回答を募集させていただきます。 もし何か実現する方法がわかる方がいらっしゃいましたらご教示ください。

--2021.2.16追記-- やはり今の機能では難しそうですのでクローズいたします。 アドバイスありがとうございました!

  • 0
  • 4
  • 1189
  • twitter facebook

Koki様 ご回答ありがとうございます。やはり無理ですか...。代替案として別の方法(シンプルにtextの中に複数のspanを入れる)も考えていたのでそちらの方で実現しようかと思います。 この度はご親切にありがとうございました。また何かの機会がありましたらその際はよろしくお願いいたします。

  • 0

ありがとうございます。 なんとなく分かりましたが、HTMLと違ってFlexMessage全体の配置は固定されるので配置を改行するのは無理だと思います。 プロパティを変えても解決しないと思うので、テキストの文字数を短くしたり、配置を変えるとかするしかないと思います。

  • 1

koki様コメントありがとうございます。簡易ではありますが図を作成しました。 もし解決方法がお分かりでしたらご教授お願いいたします。

  • 0

どんな配置にしたいのかよくわからないので自分で図を書いてもらませんか? でないとアドバイスのしようがありません

  • 0

Similar posts

    No similar posts

Are you sure? question.vm