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

Answer 2

在li标签内的p标签上使用以下样式

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

Answer 3

你走了：

p {
  white-space: nowrap;
  text-overflow: ellipsis;
  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>

Bootstrap 4列表项仅限单行（省略号不起作用）

3 个答案: