テキストエレメントのWidthを、テキストの長さによって可変にする方法

bubbleでチャット機能を構築しています。
送信側、受信側と、テキストエレメントに背景色を付け、メッセージ部分を作成しました。
これらがテキストの長さによって変わるようにしたいのですが、どうしても固定されてしまい、不格好になってしまいます。

Fixed-Widthは外しており、Minimum Widthは20% (65px) に設定しているので、充分に縮まりそうな気がしましたが、ダメでした。
レスポンシブタブでの、「Shrink if text gets shorder」にもチェックを入れています。

ULビルダー、レスポンシブタブ、プレビュー画面はこのような感じです。



ちなみにこれはテキストエレメントで作成していますが、リンクエレメントでも同じことをしようと思っており、そちらもうまくいきません。
ご教示よろしくお願いします。

「いいね!」 2

@Aki_Sydney さん
調べたところ、フォーラムからいくつかヒントになりそうなものがありましたので、共有いたします。(フォーラムはこちら)

・複数のテキストボックスを用意して、文字数に応じて条件付きで表示させる
・HTMLを使用する(リンクはこちら)
・pluguinを使用する(調べた限り有料)

どうやらこの問題は、5年前からあったようですが、いまだにbubbleが解決していない問題のようです。(フォーラムより)

お詳しい方がいらっしゃれば、僕も教えていただきたいです。

「いいね!」 1

以前に個人のTwitterで発信してましたが、こちらのプラグインを使用すると非常に簡単に作ることができます(有料です)。

実際にチャット画面風にしたもの

「いいね!」 4

@Tomoya_Taniguchi @yukikun さん、
ご回答いただきありがとうございました!!

HTMLタグにCSSを書き込むことによって、綺麗なチャットを構築することができました:blush:


「いいね!」 4