template div class=container span Breadcrumb list=databreadcrumbList div class=box div class=title datatitle div div title=datasubTitle class=subTitle datasubTitle div

可以使用flex布局的方式，将两个span元素设置为等宽，然后在子元素中使用white-space: nowrap;和text-overflow: ellipsis;来实现文字内容超过一行时省略号的显示。

具体的做法是，在.container元素中设置display: flex;，然后给每个span元素添加flex: 1;，表示每个span元素平均分配剩余空间。

.container {
  display: flex;
  span {
    flex: 1;
  }
}

接着，在.subTitle元素中添加以下样式：

.subTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这样就可以实现文字内容超过一行时省略号的显示。完整的代码如下：

<template>
  <div class="container">
    <span>
      <!-- Breadcrumb组件和标题 -->
    </span>
    <span>
      <div class="footer">
        <div class="btn">
          <!-- 按钮 -->
        </div>
      </div>
    </span>
  </div>
</template>

<style>
.container {
  display: flex;
  span {
    flex: 1;
  }
  .footer {
    /* 省略其他样式 */
    .btn {
      /* 省略其他样式 */
      > span {
        margin-left: 20px;
      }
    }
  }
  .subTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
``