長いルックアップ項目を一覧で自動改行させたい

kintone カスタマイズ
1

背景・実現したいこと

 長いルックアップの項目（店舗コード）を「あああ・・・・」表示ではなく

店舗名のように枠の幅で改行したいのですが、できません。

どのようにCSSを書けばよいのでしょうか？初心者です。

 

ちなみに今は、以下のように記載しています。

@charset “UTF-8”;
.recordlist-header-cell-gaia{
    background-color: #c1ddf7;
    white-space: pre-line;
    text-overflow: clip;
}
/* 明細域 */
.recordlist-cell-gaia  {
    white-space: pre-wrap;
    text-overflow: clip;
    word-break: break-all;
}
div.line-cell-gaia.recordlist-ellipsis-gaia span{
    white-space: pre-wrap;
    text-overflow: clip;
    word-break: break-all;
} 

2

ルックアップの選択画面の幅の調整ということでしたら、下記は参考になりませんでしょうか？
違う箇所ならすいません。

https://developer.cybozu.io/hc/ja/community/posts/115000342906-%E3%83%AB%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E7%94%BB%E9%9D%A2%E3%81%AE%E9%A0%85%E7%9B%AE%E8%A1%A8%E7%A4%BA%E5%B9%85%E3%81%AE%E8%AA%BF%E6%95%B4%E3%81%AF%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%99%E3%81%8B-

3

3つ目のセレクタを下記に修正すればうまくいきました。

div.line-cell-gaia.recordlist-ellipsis-gaia * {
    white-space: pre-wrap;
    text-overflow: clip;
    word-break: break-all;
}

「*」を設定しているため、div.line-cell-gaia.recordlist-ellipsis-gaia 要素のすべての子孫要素が対象になります。

「…」がつくパターンは下記3つ見つけましたが、すべてのパターンで問題ないことを確認しました。

  • div.line-cell-gaia.recordlist-ellipsis-gaia > span
  • div.line-cell-gaia.recordlist-ellipsis-gaia > span > a
  • div.line-cell-gaia.recordlist-ellipsis-gaia > a

※このアプリのデータは「問い合わせ管理（顧客サポートパック）」のサンプルです。

4

村濱一樹さん、さっそくの回答ありがとうございます。

今回は、幅の調整ではなく自動的に改行をするイメージでした。でも参考になりました！ありがとうございました。

5

川村さん
回答ありがとうございます。

教えていただいた以下の記載で、ルックアップ項目も改行出来ました！

また、要素のことも教えていただきありがとうございました。
div.line-cell-gaia.recordlist-ellipsis-gaia * {
    white-space: pre-wrap;
    text-overflow: clip;
    word-break: break-all;
} 

6

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。