css - Bootstrap 4 列表项仅单行(省略号不起作用)

Question

我有一张带有列表项的 Bootstrap 4 卡片。我希望每个列表文本都只有一行，并且占满卡片的整个宽度，否则显示 3 个点(省略号)或简单地使用 overflow:hidden 隐藏它，但它不起作用。

问题是:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item"><p>Long content ............. Here. Overflow Ellipsis or Hidden not working (This should be 1 line of card width, on all screen sizes, and depending on screen size)</p></li>
    <li class="list-group-item"><p>Second List Item</p></li>
    <li class="list-group-item"><p>Third List Item</p></li>
  </ul>
</div>

Answer 1

只需使用 Bootstrap 4 text-truncate 类..

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item"><p class="text-truncate">Long content ............. Here. Overflow Ellipsis or Hidden not working (This should be 1 line of card width, on all screen sizes, and depending on screen size)</p></li>
    <li class="list-group-item"><p>Second List Item</p></li>
    <li class="list-group-item"><p>Third List Item</p></li>
  </ul>
</div>

Codeply demo

阅读更多关于 Bootstrap 4 text utilities 的信息