How to manage long text div using bootstrap CSS flex boxes

Question

I'm modifying a CSS template based on bootstrap, in order to obtain a responsive simple website.

The page provides a list of events. Since show_date and show_shop have fixed width, when the website is opened on a smartphone (smaller screen) the class flex-row allows the show_name and show_location to be disposed in column to save space.

The problem is that when the text in show_name and show_location is too long, the text wrap out of the box in vertical.

How can I force the text in show_name and show_location to use only a single line (one for each one), truncating the text with ...?

I tried overflow: hidden with text-overflow: ellipsis but it doesn't work (I think due to the flex width of the div).

Thanks for help.

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

look up line clamp https://stackoverflow.com/questions/70679732/css-line-clamp-does-not-work-in-safari-on-inner-block-level-elements/70683084#70683084 — J Davies, Jan 28 '22 at 19:11
Any reason you're not using a table? This is a perfectly valid use for one. — isherwood, Jan 28 '22 at 21:07

score 0 · Answer 1 · answered Jan 28 '22 at 21:12

You could simply use the text-nowrap class on those divs and use spans inside. I've also removed some redundant div elements and combined 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>

score 0 · Answer 2 · answered Jan 28 '22 at 21:26

Since show_date and show_shop have fixed width

You can easily achieve this with some few lines of 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;
    }
}

score 0 · Accepted Answer · answered Jan 29 '22 at 13:16

0

I've solved my problem following the bootstrap's way. I can obtain the best result adding the class text-truncate to the classes show_info, show_name, and show_location. Thanks for help!

answered Jan 29 '22 at 13:16

I. Iudice

45
5

How to manage long text div using bootstrap CSS flex boxes

3 Answers3