Bubbleで長いテキストをスタイリッシュに表示！CSSで「…」表示を実装する方法

Bubbleでアプリを開発していると、長いテキストをどう表示するか悩むことはありませんか？

今回は、テキストを途中で切り、枠からはみ出た部分を「…」で表示する方法を解説します。Bubble標準機能だけでは難しいこの実装、CSSの力を借りて実現しましょう。

ゴールイメージ

左の複数行の文字を右のように1行で表示し、はみ出した部分を・・・で表示します。

実装のステップ

• 長い文字をtextに設定してください。横幅はMax値を設定するようにしてください。

• ID Attributeには何か適当な文字（ここではtruncate)を入力してください。これがCSSでスタイルを適用する先のID属性になります。

• HTML要素を画面に配置し、以下のstyleを適用してください。

<style>
#truncate{
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
        font-color:red;
}
</style>

• これで出来上がりです。

注意事項

• Textの設定で”Center the text vertically”にチェックをつけると以下のように末尾の「・・・」が表示されません。スパッと切れます。

さらに便利な使い方

• 上記の例ではID属性を使っていましたが、以下のプラグインを使うことでClassを使えるようになります。
  Classを使えば複数個所へ同じCSSを簡単に適用できるようになります。

• 有料契約すると、Bubbleの全ページにstyleを適用することが出来ます。
  設定画面のSEO/metatagsの中にあるScript in the bodyでstyle sheetを記載できるようになります。一つ一つのページにCSSを書かなくてよくなりますよ。

まとめ

今回は、Bubbleで長いテキストを「…」で省略表示する方法を紹介しました。classifyプラグインとCSSを活用することで、Bubble標準機能の制約を超えた表現が可能になります。ぜひお試しください！