Bootstrap 4：隐藏卡片文本中的溢出

问题描述：

我有一个引导4张卡片，我想隐藏字幕的溢出（并显示“...”）。我怎样才能做到这一点？如果可能的话用纯引导代码...Bootstrap 4：隐藏卡片文本中的溢出

<div class="card-block p-1"> 
    <p class="card-title">Test object</p> 
    <p class="card-subtitle text-muted">Added by Someone with a long name</p> 
    <p class="card-text mx-auto text-center"><span class="badge badge-pill badge-danger">€ 800</span></p> 
</div>

答

只需使用text-truncate UTIL类..

 <div class="card"> 
      <div class="card-block p-1"> 
        <p class="card-title">Test object</p> 
        <p class="card-subtitle text-muted text-truncate">Added by Someone with a long name</p> 
        <p class="card-text mx-auto text-center"><span class="badge badge-pill badge-danger">€ 800</span></p> 
      </div> 
    </div>

https://www.codeply.com/go/bZufg6X1So

我用bootstrap4-α-6和我有一些我的解决方法卡列导致您的解决方案出现问题。所以我会先开始使用bootstrap 4测试版，并希望解决一些问题（那么你的解决方案肯定会起作用）... – bits

好的，所以我测试了Bootstrap 4 beta，但是问题仍然存在......我仍然需要添加“显示：inline-block“到卡类，以防止卡分裂成列。但此修复似乎打破了文本截断解决方案...请参阅此代码（https://www.codeply.com/go/EgoBGlw9xA） - >先锋DJM 850的卡在520x视口中未正确显示...或更少 – bits

我并没有真正在Chrome中看到问题，但css多列在浏览器中不一致。无论哪种方式，文本省略号的原始问题已被回答。 – ZimSystem

Bootstrap 4：隐藏卡片文本中的溢出

相关推荐