时间戳

首页 > 解决方案 > Bootstrap 4 列表项仅单行（省略号不起作用）

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

问题描述

我有一张带有列表项的 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>

标签： csstwitter-bootstrapbootstrap-4

解决方案

只需使用 Bootstrap 4text-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 文本实用程序的更多信息

推荐阅读