新規投稿
フォローする

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

背景・実現したいこと

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

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

どのように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;

0

4件のコメント

Avatar
村濱一樹
1
Avatar
川村

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

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

川村により編集されました
1
Avatar
なかゆ

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

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

0
Avatar
なかゆ

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

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

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

1
サインインしてコメントを残してください。