【问题标题】: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 行之后而不是在第一行本身截断或省略?
    猜你喜欢
    • 1970-01-01
    • 2017-02-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-12-09
    • 1970-01-01
    相关资源
    最近更新 更多