Tips for handling lengthy text divisions with Bootstrap's CSS flexbox capabilities

I am currently making adjustments to a CSS template that is based on bootstrap, with the goal of creating a responsive and simple website.

The webpage displays a list of events. When viewed on a smartphone (smaller screen), the flex-row class allows show_name and show_location to be arranged in a column layout for space-saving purposes due to the fixed width of show_date and show_shop.

An issue arises when the text in show_name and show_location exceeds the available space, causing it to wrap vertically outside of their designated boxes.

Is there a way to restrict the text in show_name and show_location to only one line each, truncating excess text with an ellipsis (...)?

I attempted using overflow: hidden along with text-overflow: ellipsis but this proved ineffective, possibly due to the flexible width of the division.

Thank you in advance for any assistance with this matter.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7e7373686f686e7d6c5c28322a322d">[email protected]</a>/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>

htmlcssbootstrap-4flexbox

Answer №1

To make those divs stay on one line and use spans inside, you can apply the text-nowrap class. I simplified the structure by removing some unnecessary div elements and consolidating classes.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bddfd2d2c9cec9cfdccdfd89938b938c">[email protected]</a>/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

Given that show_date and show_shop have set widths

All it takes is a few lines of CSS to make this happen

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

Answer №3

By implementing Bootstrap's recommended approach, I successfully resolved my issue. To achieve optimal results, I applied the text-truncate class to the elements show_info, show_name, and show_location. Appreciate the assistance provided!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Nav Bar Toggle Button - Refuses to display the dropdown menus

My Django homepage features a Bootstrap navbar that, when resized, displays a toggle button. However, I am experiencing difficulty with dropdown functionality for the navbar items once the toggle button is activated. Can anyone provide guidance on how to a ...

javascripthtmlcssdjangobootstrap-4

Is there a way to execute a Python script by clicking the Submit button in HTML using Django?

I am still learning how to work with Django as my framework. Currently, I have an HTML file that displays using Django. I've included a Submit button on the page. Additionally, I have a Python script stored locally on my server. Is there a method to ...

pythonhtmldjango

Unable to establish connection between Router.post and AJAX

I am currently in the process of developing an application to convert temperatures. I have implemented a POST call in my temp.js class, which should trigger my ajax.js class to handle the data and perform calculations needed to generate the desired output. ...

javascripthtmlnode.jsajaxexpress

AngularJS version is a software update for the Angular

I recently started learning AngularJs and have been following the Oreilly AngularJS book. I was able to successfully run this code with Angular version 1.0.8, but it doesn't work with newer versions of Angular. Can someone tell me why? <!DOCTYPE h ...

javascripthtmlangularjs

Issue with Child Element Width in CSS3 Not Adhering to Parent Container's Width

I'm working on containing my ul and li elements within a div while respecting the div's width using margin-left: auto. My goal is to prevent the ul/li from extending outside of the div, keeping them neatly inside the container. Based on my resear ...

htmlcss

I am having trouble debugging the Twitter Bootstrap v4-alpha grid. The col-sm-offset-* class doesn't seem to be

Something has been altered somewhere, causing col-sm-offset-*s to stop functioning entirely. For instance, when attempting to split the screen in half and only display content on the right side, I typically would use: <div class="container"> < ...

csstwitter-bootstraptwitter-bootstrap-4

Can an iOS Bluetooth hybrid app be developed using a combination of HTML5, JavaScript, CSS3, and Xcode?

Hello fellow developers! This is my first time posting on Stack Overflow and I appreciate you taking the time to read my question :) I am delving into app development and aiming to create an Android and iOS app that can control hardware using Bluetooth co ...

androidioshtmlhybrid

Steps to create a loading bar that starts loading when an ajax task begins

What is the best way to show a loading bar as an AJAX task begins on a page? Additionally, how can we make sure that hitting the back button will return to what was being viewed before that specific AJAX task? ...

htmlajax

What methods can I use to eliminate an iframe virus that has infected all my PHP files on my website?

I'm facing a challenge with eliminating a virus code from my php files. All 1200+ php files on my server have been infected by this malicious code, which injects the following line into the html output: Here is the virus code: <tag5479347351>& ...

phphtmliframevirustrojan

The optimal method for designing a select menu to ensure it works smoothly on various web browsers

Recently, I encountered an issue with customizing a select menu using CSS and jQuery. After some work, I was able to achieve a result that I am quite pleased with: So far, the styling works perfectly in Mozilla, Opera, Chrome, and IE7+. Below is the curr ...

javascriptjqueryhtmlcss

Content located on the right-hand side of the menu

I am currently working on a vertical navigation menu design, but I am facing some issues with aligning the text to start from the very left edge of the element. HTML <div class="jobs-links"> <ul> <li><a href="renovations. ...

htmlcsstextnavigationalignment

Replacing a JSON vault using XHR: A step-by-step guide

Can someone assist me in replacing the JSON data from a JSON file on a website using JavaScript XHR? setagaya.json: {"trains":[{"operation_number":1,"line_id":26007,"station_id":784,"track_number":1,"up":true},{"operation_number":2,"line_id":26007,"stati ...

javascripthtmljson

Execute function upon initial user interaction (click for desktop users / tap for mobile users) with the Document Object Model (DOM)

Looking to trigger a function only on the initial interaction with the DOM. Are there any vanilla JavaScript options available? I've brainstormed this approach. Is it on track? window.addEventListener("click", function onFirstTouch() { console.l ...

javascriptjqueryhtmlcss

Tips for showcasing numerous images in a single row on a website

Looking to organize images into rows with 3/4 images in each row, not stacked vertically as shown below. Here is the code I have tried: <html> <head> <title>Images Displayed in Rows</title> <meta charset="utf-8"> <meta ...

phphtmlcsstwitter-bootstrap

Ways to create a flexbox that can scroll and includes two divs that fill the entire screen

I need to create a flexbox layout with two divs that split the screen evenly. However, I want the flexbox to change direction from row to column and make each div full width and height of the screen when the viewport is smaller than 800px, creating a scrol ...

htmlcssresponsive-designflexbox

The button hyperlink fails to function properly on mobile devices

I'm currently using the following template: in the Blog News section, the "Read more" button is not functioning properly on mobile devices. The only difference I've made in the HTML code is adding an "a" tag: <a href="something.html">< ...

htmlcsstwitter-bootstrap

A method to trigger the opening of a div tag when a button is clicked using Vue.js

<div class="input-wrapper"> <div class="mobile-icon"></div> <input class="input-section label-set" type="text" v-model.trim="$v.mobile.$model" :class="{'is-invalid': ...

javascripthtmlcssvue.js

What is causing the color property to not accept CSS gradients?

Is there a way to create text with a gradient color effect? I've noticed that gradients don't work on the color property. Is there another method to achieve text with gradient colors? ...

htmlcss

The alignment of Bootstrap text is not in alignment

Hi there, I am pretty new to bootstrap and have been hunting for a solution regarding this specific layout that I want to achieve. Check out the image below: https://i.sstatic.net/qqaCo.png The issue I am facing is that in my code, the name, code, status, ...

htmlcssbootstrap-4

Achieving Text Centering in kableExtra Cells with CSS: A Step-by-Step Guide

Recently, I received a helpful solution that involved using the extra_css = argument in cell_spec() from the kableExtra package. This allowed me to fill the entire cell of my table instead of just the text inside it. However, even after specifying align = ...

cssrkableextra