Vue 组件：标题卡片组件，实现子元素文字超出省略显示

<template>
  <div class='container'>
    <span>
      <Breadcrumb :list='data.breadcrumbList' />
      <div class='box'>
        <div class='title'>{{ data.title }}</div>
        <div :title='data.subTitle' class='subTitle'>{{ data.subTitle }}</div>
      </div>
    </span>
    <span>
      <div class='footer'>
        <div class='btn'>
          <slot name='bottons' />
        </div>
      </div>
    </span>
  </div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'

export default {
  name: 'TitleCardComponent',
  components: { Breadcrumb },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  }
}
</script>
<style  lang='scss'>
.container {
  padding-top: 22px;
  width: 100%;
  display: flex;
  height: 150px;
  background: #fff;
  span {
    flex: 1;
    // flex-shrink: 0;
    .box {
      padding-left: 48px;
      .title {
        margin-top: 20px;
        font-size: 18px;
        color: #333;
      }
      .subTitle {
        margin-top: 11px;
        font-size: 14px;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .footer {
      position: relative;
      width: 100%;
      height: 100%;
      // 背景图片 靠右
      background: url('../../assets/background.png') no-repeat;
      background-size: 100% 100%;
      .btn {
        width: 100%;
        padding-right: 60px;
        padding-bottom: 20px;
        position: absolute;
        bottom: 0;
        text-align: right;
        > span {
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
<h2>实现两个 span 等宽，子元素文字超出省略显示</h2>
<p>为了实现两个 span 等宽，并使子元素文字超出时省略显示，可以使用 flex 布局。具体步骤如下：</p>
<ol>
<li><strong>设置容器为 flex 布局：</strong> 在 <code>.container</code> 元素中添加 <code>display: flex;</code> 属性。</li>
<li><strong>设置 span 元素等宽：</strong> 在每个 <code>.span</code> 元素中添加 <code>flex: 1;</code> 属性。</li>
<li><strong>实现文字超出省略：</strong> 在 <code>.subTitle</code> 元素中添加以下样式：
<pre><code class="language-css">.subTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</code></pre>
</li>
</ol>
<p>通过以上步骤，即可实现两个 span 等宽，并在文字超出时显示省略号。</p>
<h2>完整代码示例</h2>
<pre><code class="language-html">&lt;template&gt;
  &lt;div class='container'&gt;
    &lt;span&gt;
      &lt;!-- Breadcrumb组件和标题 --&gt;
    &lt;/span&gt;
    &lt;span&gt;
      &lt;div class='footer'&gt;
        &lt;div class='btn'&gt;
          &lt;!-- 按钮 --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/span&gt;
  &lt;/div&gt;
&lt;/template&gt;

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