flex布局,子元素自动撑开并打点(省略)

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>
posted @ 2024-05-25 18:03  胡姐姐  阅读(82)  评论(0编辑  收藏  举报