element-plus tag标签面包屑一行内展示不会溢出效果

如果你想将 element-plus 的标签和面包屑组件同时展示在一行内，并且不希望它们溢出父容器，可以使用一些 CSS 样式来实现。以下是一个示例代码：

<div class="container">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{path: '/home'}">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{path: '/list'}">列表页</el-breadcrumb-item>
    <el-breadcrumb-item>详情页</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="tag-container">
    <el-tag>标签1</el-tag>
    <el-tag>标签2</el-tag>
    <el-tag>标签3</el-tag>
  </div>
</div>

<style>
.container {
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.tag-container {
  display: flex;
  margin-left: 20px;
  overflow: hidden;
}
.el-breadcrumb {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-tag {
  margin-right: 10px;
  white-space: nowrap;
}
</style>

上面的示例代码中，通过对容器和标签设置 overflow 和 white-space 属性来保证它们不会溢出父容器。同时，对面包屑组件也设置了 text-overflow 属性来实现文本溢出省略号的效果。

其中，样式 `.container { overflow: hidden; white-space: nowrap; }` 将容器的溢出方式设置为隐藏，并将文本的换行方式设置为不换行。这样可以保证容器内的元素不会溢出父容器。

样式 `.el-breadcrumb { flex: 1; overflow: hidden; text-overflow: ellipsis; }` 则是对面包屑组件设置文本溢出省略号的效果。

样式 `.el-tag { margin-right: 10px; white-space: nowrap; }` 则是将标签的间距和文本的换行方式设置为不换行，从而保证标签不会溢出。