How to manage long text div using bootstrap CSS flex boxes-CodePudding

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div >
  <div >
    <ul >

      <li >
        <div>
          <div >18/07</div>
        </div>
        <div >
          <div ><a href="#">Electric Castle Festival</a></div>
          <div >Cluj, Romania</div>
        </div>
        <div >
          <div ><a href="#">Buy Tickets</a></div>
        </div>
      </li>

      <li >
        <div>
          <div >20/07</div>
        </div>
        <div >
          <div ><a href="#">Ultra Music Festival</a></div>
          <div >Miami, USA</div>
        </div>
        <div >
          <div ><a href="#">Buy Tickets</a></div>
        </div>
      </li>

      <li >
        <div>
          <div >25/08</div>
        </div>
        <div >
          <div ><a href="#">Vikings Festival</a></div>
          <div >Oslo, Norway</div>
        </div>
        <div >
          <div ><a href="#">Buy Tickets</a></div>
        </div>
      </li>

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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div >
  <div >
    <ul >

      <li >
        <div >18/07</div>
        <div >
          <span ><a href="#">Electric Castle Festival</a></span>
          <span >Cluj, Romania</span>
        </div>

        <div ><a href="#">Buy Tickets</a>
        </div>
      </li>

      <li >
        <div >20/07</div>
        <div >
          <span ><a href="#">Ultra Music Festival</a></span>
          <span >Miami, USA</span>
        </div>
        <div ><a href="#">Buy Tickets</a></div>
      </li>

      <li >
        <div >25/08</div>
        <div >
          <span ><a href="#">Vikings Festival</a></span>
          <span >Oslo, Norway</span>
        </div>
        <div ><a href="#">Buy Tickets</a></div>
      </li>
    </ul>
  </div>
</div>

CodePudding user response：

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