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演示

阅读有关Bootstrap 4文本实用程序的更多信息