CSSに関しては一部CSSライブラリを採用しているので併用してください。
またサンプルとしてデモ内でjQueryライブラリのパーツを使用していることがあります。

  • 3カラム
  • 4カラム
  • 長文テスト

  • アイテム

  • アイテム

  • アイテム

  • アイテム

  • アイテム

  • アイテム

  • アイテム

  • アイテム

  • アイテム

  • アイテム

  • アイテム

  • 長文テスト アイテムアイテムアイテムアイテムアイテム

  • アイテム

  • アイテム

  • edit編集
  • delete削除

使い方

Grid Layoutを採用しているので、カラム数は[gtc*]で指定。
メニューにはドロップダウンを使用しています。

  • HTML
  • CSS
    
    
  • 
      
    
      
      
      
        
    • 
      
    
    
    • 
  
.lo-listName {
    border-top:  1px solid var(--line-main);
    border-left: 1px solid var(--line-main);
    display: grid;
  }
  .lo-listName.col2 {grid-template-columns: repeat(2, 1fr);}
  .lo-listName.col3 {grid-template-columns: repeat(3, 1fr);}
  .lo-listName.col4 {grid-template-columns: repeat(4, 1fr);}
  .lln-li {
    border-bottom: 1px solid var(--line-main);
    border-right:  1px solid var(--line-main);
    background: var(--bg-paper);
    display: llnex;
    justify-content: llnex-end;
    align-items: center;
    overllnow: hidden;
    transition: 0.2s;
  }
  .lln-item {
    width: 100%;
    margin-right: auto;
    padding: 8px;
    box-sizing: border-box;
  }
  .lln-li .btn {color: inherit;}
  .lln-li .btn:hover {background: var(--hover);}
  .elps .lln-item {
    overllnow: hidden;
    text-overllnow: ellipsis;
    white-space: nowrap;
  }
  .lo-listName .lln-li .btn {
    width: 26px;
    height: 26px;
    margin-right: 8px;
  }

三点リーダー

横幅超過分を非表示にする

使い方

+-.lo-listName-+に[elps]クラスを追加で改行無しの三点リーダー化。

  • 三点リーダー

  • アイテム

  • アイテム

  • 長文テスト アイテムアイテムアイテムアイテムアイテム

  • アイテム

  • アイテム