複数行に対応!Bubbleで長文の末尾を三点リーダーで省略する方法

ノーコードツール「Bubble」で長すぎる文章を2行までで省略し、文の末尾に三点リーダー「…」を表示させる実装テクニックをご紹介。

いまや日本人のインフラとなったSNS「LINE」のトークルーム一覧画面を思い浮かべていただければ。

Bubbleでトークルーム一覧画面を作る時に活躍すると思います!ぜひ実践してみてくださいませェー!

動画解説バージョンはこちら!

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。

目次
日本最大級のノーコード開発実績!

①日本最大級の開発実績
②最安30万円。通常の1/10~の低コスト開発
③最短2週間。圧倒的な開発スピード
④高難易度の開発もスムーズ
⑤複数のノーコードツールに対応

EPICsは上記5つの強みを武器に受託開発を行っています。
まずはご相談ください。

実装イメージ

今回紹介する方法を使うと、上の画像のように3行以上の長文のときは2行までで省略され、テキストの末尾に三点リーダー「…」を表示させることができます。

LINEのトーク一覧画面のイメージで作りました!ちゃんとレスポンシブにも対応してます。

実装手順

以下の手順で実装します。

  1. Settings > GeneralのAdvanced optionsの設定をする
  2. プラグイン「Classify」をインストールする
  3. HTMLエレメントを設置し、CSSを入れる
  4. Text elementのAppearanceのID Attributeにclassを入れる

Settings > GeneralのAdvanced optionsの設定をする

まず前準備として、Settings > GeneralのAdvanced optionsの[ Expose the option to add an ID attribute to HTML elements ]にチェックを入れます。

直訳すると、「HTML 要素に ID 属性を追加するオプションを公開します」という意味らしいです。

プラグイン「Classify」をインストールする

次に、プラグイン追加ページでClassifyを検索しインストールします。

HTMLエレメントを設置し、CSSを入れる

  1. HTMLエレメントをてきとうにページに設置します
  2. HTMLエレメントのAppearanceに以下のコードをコピペします
<style>
.line-clamp-2 {
  overflow: hidden!important;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>

「-webkit-line-clamp: 2」で2行分の高さで切ってます。

このプロパティの詳細を知りたい方は下記をご覧下さいな。

-webkit-line-clamp – CSS: カスケーディングスタイルシート | MDN

Text elementのAppearanceのID Attributeにclassを入れる

最後に、長すぎる文章のときに2行分で切って末尾を三点リーダー表示させたいText elementのAppearanceのID Attributeに下記をコピペしてやれば完成です!

{class:["line-clamp-2"]}
日本最大級のノーコード開発実績!ノーコードなら迷わずEPICs

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します!

そんな弊社に開発相談をいただくメリットは大きく4つあります!

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます!

②最安30万円!通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間!圧倒的な短期間で納品
ノーコード開発では複雑なコードを1から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です!
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です!

「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
目次