flex佈局,子元素自動撐開並打點(省略)

胡姐姐發表於2024-05-25
image
    .box {
      display: flex;
      align-items: center;
      width: 200px;
    }
    .label {
      margin-right: 4px;
      background-color: #ccc;
      color: #fff;
      white-space: nowrap;
    }
    .desc {
      flex: 1;/** 自動撐開 */
      width: 0;/** 設定了省略才生效 */
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
<div class="box">
    <span class="label">標籤:</span>
    <div class="desc">我是描訴的味道的點點滴滴點點滴滴點點滴滴點點滴滴的</div>
  </div>

相關文章