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

Question

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

Answer 1

只需使用text-truncateutil类..

     <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