IM-BloomMaker リッチテーブルでセルからはみ出したテキストを三点リーダーで省略して表示する方法

このCookBookでは、「リッチテーブル」エレメントでセルの横幅より長いテキストを改行させずに表示し、はみ出した部分を三点リーダーで省略して表示する方法について説明しています。
intra-mart Accel Platform 2021 Summer でリッチテーブルエレメントに追加された columnWidth プロパティを利用しています。
それ以前のバージョンではできないので注意してください。

サンプルコンテンツ

この CookBook で使用するコンテンツです。
リッチテーブルの3行目に表示されているデータが改行されて表示されているので、これを1行で表示されるように修正していきます。

サンプルコンテンツのインポートファイル

この CookBook で使用するサンプルコンテンツのインポートファイルです。
IM-BloomMaker のインポート画面からインポートしてください。
intra-mart Accel Platform 2021 Summer 以降のバージョンで利用できます。

cookbook258452_im_bloommaker-data.zip

手順

1. リッチテーブルのテキストを改行しないようにする
2. 省略する時に三点リーダーが表示されるようにする
3. 表示内容を確認する

1. リッチテーブルのテキストを改行しないようにする

• 上記の「サンプルコンテンツのインポートファイル」のcookbook258452_im_bloommaker-data.zipをダウンロードし、IM-BloomMaker のインポート画面からインポートしてください。
  インポートの方法は以下のドキュメントを参照してください。
  IM-BloomMaker for Accel Platform IM-BloomMaker ユーザ操作ガイド
• コンテンツ一覧画面を表示してください。
• コンテンツツリーから「intra-mart CookBook」＞「im_cookbook_258452」＞「im_cookbook_258452」のコンテンツを選択し、「デザイン編集」ボタンをクリックしてください。
  
• ページに配置されている「リッチテーブル」エレメントを選択し、右ペインの「プロパティ」タブを表示してください。
  

• リッチテーブルのプロパティが以下の通りに設定されていることを確認してください。

  No	カテゴリ	プロパティ	設定値
  1	エレメント固有	columnWidth	30%,30%,40%
  2	幅・高さ	横幅	800px

  columnWidth プロパティでセルの横幅を指定しています。
  これにより、セルの横幅よりも長い文字列は折り返して表示されます。

• 「テキストスタイル」カテゴリの「改行設定」プロパティに「keep-all」を指定してください。
  
• リッチテーブルのデータが改行されずに表示されるようになりました。
  

2. 省略する時に三点リーダーが表示されるようにする

• セルに入りきらない部分を三点リーダーで省略して表示するには CSS の「text-overflow: ellipsis」を使います。
• ヘッダの「CSS編集」アイコンをクリックしてください。
• CSS エディタに以下の CSS を入力してください。

  .im-hichee-im-richtable-td {
    text-overflow: ellipsis;
  }
  

• 「決定」ボタンを押下して CSS エディタを閉じてください。

3. 表示内容を確認する

• ヘッダの「プレビュー」アイコンをクリックしてプレビュー画面を表示してください。
• リッチテーブルの3行目のデータが1行で表示され、セルに収まらない部分が三点リーダーで表示されていることを確認してください。