flex布局，子元素自动撑开并打点（省略）

     .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 胡姐姐阅读(97) 评论(0) 编辑收藏举报

hsq

flex布局，子元素自动撑开并打点（省略）

搜索

常用链接

最新随笔

我的标签

随笔分类 (1)

随笔档案 (21)

文章分类 (7)

UI工具

调试工具

开发工具

阅读排行榜

评论排行榜

最新评论

	.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>