如何截断Bootstrap卡页脚文本？

Question

如何正确使用.text-truncate（docs）来确保第二张卡的.card-footer中的文本缩短为仅占一行？

<a href="https://www.benefitspro.com/2019/04/02/can-self-funding-work-for-smaller-employers/?slreturn=20190308081639" target="_blank" class="d-flex align-items-stretch text-dark card-link">
    <div class="card card-classic w-100 bg-white border-1 shadow-sm rounded-top">

        <img src="http://res.cloudinary.com/braincloud/image/fetch/w_400,h_300,c_thumb,g_faces/http://www.contexthq.com/wp-content/uploads/146588_Healthcarevalue.jpg" class="card-img-top img-fluid"><!-- had w-100 -->

        <span class="badge badge-info font-weight-normal mr-2 overlay-content">Guest Articles</span>

        <!-- Title -->
        <div class="card-body pb-2 pt-2 px-3 mt-0">
            <h6 class="card-title pt-2 mb-1">Can self-funding work for smaller employers?</h6>
        </div>

        <!-- Author -->
        <div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3">
          <span class=""><img alt="" src="http://0.gravatar.com/avatar/?s=14&amp;d=mm&amp;r=g" srcset="http://1.gravatar.com/avatar/?s=28&amp;d=mm&amp;r=g 2x" class="avatar avatar-14 photo avatar-default rounded-circle" height="14" width="14"> Rachel Lyubovitsky, <img src="https://www.google.com/s2/favicons?domain=everythingbenefits.com" alt="EverythingBenefits logo" width="14" class="mr-1 bg-white" onerror="this.src='http://simpleicon.com/wp-content/uploads/building-3-256x256.png';">EverythingBenefits&nbsp;&nbsp;</span>
        </div>

    </div>

</a>

向d-block text-truncate本身添加.card-footer会使卡错误地加宽。...

将d-block text-truncate添加到span内的.card-footer中也是如此...

我以前设法对其他布局的文本应用相同的目标...

      <a href="http://www.retailtimes.co.uk/mobile-commerce-platform-provider-bijou-commerce-pinpoints-top-trends-online-fashion/" class="text-dark col-vertical" target="_blank">
              <img src="http://res.cloudinary.com/braincloud/image/fetch/w_350,h_250,c_thumb,g_faces/https://logo-core.clearbit.com/www.retailtimes.co.uk" class="img-fluid rounded mb-2 w-100" onerror="this.src='https://via.placeholder.com/350x250?text=Missing+image';">

              <span class="small text-muted d-block text-truncate pb-2">
                <img alt="" src="http://0.gravatar.com/avatar/?s=14&amp;d=mm&amp;r=g" srcset="http://2.gravatar.com/avatar/?s=28&amp;d=mm&amp;r=g 2x" class="avatar avatar-14 photo avatar-default rounded-circle" height="14" width="14"> Beth Wond, <img src="https://www.google.com/s2/favicons?domain=bijoucommerce.com" alt="Bijou Commerce logo" width="14" class="mr-1 bg-white" onerror="this.src='http://simpleicon.com/wp-content/uploads/building-3-256x256.png';">Bijou Commerce
              </span>

              <h6 class="mb-3" style="/*font-size:1.1em;font-weight:500;*/">Mobile commerce platform provider, Bijou Commerce, pinpoints top trends in online fashion</h6>


              <span class="badge badge-info font-weight-normal mr-2 overlay-content">Guest Articles</span>

      </a>

但这不在.card-footer内。