ノーコードツール「Bubble」で長すぎる文章を２行までで省略し、文の末尾に三点リーダー「…」を表示させる実装テクニックをご紹介。
いまや日本人のインフラとなったSNS「LINE」のトークルーム一覧画面を思い浮かべていただければ。
Bubbleでトークルーム一覧画面を作る時に活躍すると思います！ぜひ実践してみてくださいませェー！
動画解説バージョンはこちら！
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
実装イメージ
今回紹介する方法を使うと、上の画像のように３行以上の長文のときは２行までで省略され、テキストの末尾に三点リーダー「…」を表示させることができます。
LINEのトーク一覧画面のイメージで作りました！ちゃんとレスポンシブにも対応してます。
実装手順
以下の手順で実装します。
- Settings ＞ GeneralのAdvanced optionsの設定をする
- プラグイン「Classify」をインストールする
- HTMLエレメントを設置し、CSSを入れる
- 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を入れる
- HTMLエレメントをてきとうにページに設置します
- 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」で２行分の高さで切ってます。
このプロパティの詳細を知りたい方は下記をご覧下さいな。
＞-webkit-line-clamp – CSS: カスケーディングスタイルシート | MDN
Text elementのAppearanceのID Attributeにclassを入れる
最後に、長すぎる文章のときに２行分で切って末尾を三点リーダー表示させたいText elementのAppearanceのID Attributeに下記をコピペしてやれば完成です！
{class:["line-clamp-2"]}
