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

【问题标题】：Bootstrap 4: hide overflow in card-textBootstrap 4：隐藏卡片文本中的溢出
【发布时间】：2018-01-23 11:01:17
【问题描述】：

我有一张 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>

【问题讨论】：

标签： overflow bootstrap-4

【解决方案1】：

只需使用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-alpha-6，我的卡片列中有一些变通方法，导致您的解决方案出现问题。所以我会先开始使用bootstrap 4 beta，希望能解决一些问题（那么你的解决方案肯定会奏效）...
好的，所以我用 Bootstrap 4 beta 进行了测试，但问题仍然存在......我仍然需要在卡片类中添加“显示：内联块”以防止卡片拆分列。但是这个修复似乎破坏了文本截断解决方案...查看此代码 (codeply.com/go/EgoBGlw9xA) --> 带有先锋 DJM 850 的卡在 520x 或更低的视口中未正确显示...
我在 Chrome 中并没有真正看到问题，但是 css 多列在浏览器中是不一致的。无论哪种方式，文本省略号的原始问题都已得到解答。
有没有办法在 3 或 4 行之后而不是在第一行本身截断或省略？