如何使用 bootstrap CSS 弹性框管理长文本 div

Question

我正在修改一个基于bootstrap的CSS模板，以获得响应式简单的网站。

该页面提供了事件列表。由于 show_date 和 show_shop 具有固定宽度，当网站在智能手机（较小的屏幕）上打开时 class flex-row 允许 show_name 和 show_location 将在列中处理以保存 space.

问题是当 show_name 和 show_location 中的文本太长时，文本会在垂直方向换行。

如何强制 show_name 和 show_location 中的文本只使用一行（每行一行），用 ... 截断文本？

我试过 overflow: hidden 和 text-overflow: ellipsis 但它不起作用（我认为是由于 div 的弹性宽度）。

感谢您的帮助。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="col-lg-8 order-lg-1 order-2 shows_list_col">
  <div class="shows_list_container">
    <ul class="shows_list">

      <li class="d-flex flex-row align-items-center justify-content-start">
        <div>
          <div class="show_date">18/07</div>
        </div>
        <div class="show_info d-flex flex-md-row flex-column align-items-md-center align-items-start justify-content-md-start justify-content-center">
          <div class="show_name"><a href="#">Electric Castle Festival</a></div>
          <div class="show_location">Cluj, Romania</div>
        </div>
        <div class="ml-auto">
          <div class="show_shop trans_200"><a href="#">Buy Tickets</a></div>
        </div>
      </li>

      <li class="d-flex flex-row align-items-center justify-content-start">
        <div>
          <div class="show_date">20/07</div>
        </div>
        <div class="show_info d-flex flex-md-row flex-column align-items-md-center align-items-start justify-content-md-start justify-content-center">
          <div class="show_name"><a href="#">Ultra Music Festival</a></div>
          <div class="show_location">Miami, USA</div>
        </div>
        <div class="ml-auto">
          <div class="show_shop trans_200"><a href="#">Buy Tickets</a></div>
        </div>
      </li>

      <li class="d-flex flex-row align-items-center justify-content-start">
        <div>
          <div class="show_date">25/08</div>
        </div>
        <div class="show_info d-flex flex-md-row flex-column align-items-md-center align-items-start justify-content-md-start justify-content-center">
          <div class="show_name"><a href="#">Vikings Festival</a></div>
          <div class="show_location">Oslo, Norway</div>
        </div>
        <div class="ml-auto">
          <div class="show_shop trans_200"><a href="#">Buy Tickets</a></div>
        </div>
      </li>

    </ul>
  </div>
</div>

Answer 1

您可以简单地在那些 div 上使用 text-nowrap class 并在内部使用 span。我还删除了一些多余的 div 元素并合并了 classes.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="col-lg-8 order-lg-1 order-2 shows_list_col">
  <div class="shows_list_container">
    <ul class="shows_list">

      <li class="d-flex flex-row align-items-center justify-content-start">
        <div class="show_date mr-3">18/07</div>
        <div class="show_info text-nowrap">
          <span class="show_name"><a href="#">Electric Castle Festival</a></span>
          <span class="show_location">Cluj, Romania</span>
        </div>

        <div class="show_shop trans_200 ml-auto"><a href="#">Buy Tickets</a>
        </div>
      </li>

      <li class="d-flex flex-row align-items-center justify-content-start">
        <div class="show_date mr-3">20/07</div>
        <div class="show_info text-nowrap">
          <span class="show_name"><a href="#">Ultra Music Festival</a></span>
          <span class="show_location">Miami, USA</span>
        </div>
        <div class="show_shop trans_200 ml-auto"><a href="#">Buy Tickets</a></div>
      </li>

      <li class="d-flex flex-row align-items-center justify-content-start">
        <div class="show_date mr-3">25/08</div>
        <div class="show_info text-nowrap">
          <span class="show_name"><a href="#">Vikings Festival</a></span>
          <span class="show_location">Oslo, Norway</span>
        </div>
        <div class="show_shop trans_200 ml-auto"><a href="#">Buy Tickets</a></div>
      </li>
    </ul>
  </div>
</div>

Answer 2

Since show_date and show_shop have fixed width

您可以通过几行 CSS

轻松实现此目的

@media (max-width: 767.98px){
    .show_info {
        width: calc(100% - 50px - 70px); /* where 50px and 70px are the width of .show_date and .show_shop respectively */
    }
    .show_name, .show_location {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

Answer 3

我已经按照bootstrap的方法解决了我的问题。将 class text-truncate 添加到 classes show_info、show_name 和 show_location 可以获得最佳结果。感谢您的帮助！

如何使用 bootstrap CSS 弹性框管理长文本 div

How to manage long text div using bootstrap CSS flex boxes

html

css

flexbox

bootstrap-4