Issue with text not truncating in nested flexbox, and min-width is ineffective

I've been struggling for hours to implement text truncation in a flexbox layout (mainly with Bootstrap 5) but have had no success. I've come across suggestions to use min-with: 0 on the parent div, but despite trying various combinations, I can't seem to make it work.

I've also read about align-items-center causing text stretching and the need for width: 100%, but that hasn't resolved the issue for me either.

The code snippet provided aims to illustrate the problem, please disregard any layout inconsistencies.

Can anyone offer guidance in the right direction?

Thank you

Edit: I am attempting to avoid explicitly defining the width as it needs to remain responsive

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de8f3ecf3ee">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae8e5e5fef9fef8ebfacabfa4bba4b9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="list-group">
  <li class="list-group-item list-group-item-secondary">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="userManagmentSearch" />
      <span class="input-group-text" id="userManagmentSearch">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
      </span>
    </div>
  </li>
  <li class="list-group-item">
    <div class="d-flex justify-content-between">
      <div class="d-flex">
        <img style="width: 24px" class="me-3" src="https://via.placeholder.com/24x24.png" alt="User Avatar" />
        <div class="d-flex align-items-center">
          <div>
            <span class="fw-bold">admin</span>
            <br />
            <span class="text-muted text-truncate">
              admin@email.comaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </span>
          </div>
        </div>
      </div>
      <div class="d-flex justify-content-end align-items-center flex-wrap">
        <span class="badge bg-danger mx-1 my-1">Admin</span>
        <span class="badge bg-success mx-1 my-1">Moderator</span>
        <span class="badge bg-secondary mx-1 my-1">User</span>
      </div>
    </div>
  </li>
  <li class="list-group-item">moderator</li>
  <li class="list-group-item">moderatoranduser</li>
</ul>;

htmlcssbootstrap-5

Answer №1

<ul class="custom-list-group">
    <li class="custom-list-item">
        <div class="custom-input-group">
            <input type="text" class="custom-form-control" placeholder="Search" aria-label="Search"
                aria-describedby="userSearch" />
            <span class="custom-input-group-text" id="userSearch">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-search" viewBox="0 0 16 16">
                    <path
                        d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                </svg>
            </span>
        </div>
    </li>
    <li class="custom-list-item">
        <div class="custom-flex-container">
            <div class="custom-flex">
                <img style="width: 24px" class="custom-image" src="https://via.placeholder.com/24x24.png"
                    alt="User Avatar" />
                <div class="custom-info">
                    <div>
                        <span class="custom-bold">admin</span>
                        <br />
                        <span class="custom-truncate" style="max-width: 150px;">
                            admin@email.comaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                        </span>
                    </div>
                </div>
            </div>
            <div class="custom-flex">
                <span class="custom-badge bg-danger">Admin</span>
                <span class="custom-badge bg-success">Moderator</span>
                <span class="custom-badge bg-secondary">User</span>
            </div>
        </div>
    </li>
    <li class="custom-list-item">moderator</li>
    <li class="custom-list-item">moderatoranduser</li>
</ul>

Use the bootstrap-5 framework for your solution

Answer №2

Modify Class & Introduce New CSS .flex-fill

CSS

.flex-fill{min-width:1px;}

HTML

<div class="d-flex justify-content-between">
          <div class="d-flex flex-fill">
            <img style="width: 24px" class="me-2" src="https://via.placeholder.com/24x24.png" alt="User Avatar" />
            <div class="d-flex flex-fill align-items-center">
              <div class="d-flex text-truncate">
                <span class="fw-bold me-3">admin</span>
                <span class="text-muted flex-fill text-truncate">
     admin@email.comaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </span>
              </div>
            </div>
          </div>
          <div class="d-flex justify-content-end align-items-center">
            <span class="badge bg-danger mx-1 my-1">Admin</span>
            <span class="badge bg-success mx-1 my-1">Moderator</span>
            <span class="badge bg-secondary mx-1 my-1">User</span>
          </div>
        </div>
    
.flex-fill{min-width:1px;}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0d00001b1c1b1d0e1f2f5a415e415c">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="36545959424542445746760318071805">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="list-group">
    <li class="list-group-item list-group-item-secondary">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="userManagmentSearch" />
            <span class="input-group-text" id="userManagmentSearch">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                </svg>
            </span>
        </div>
    </li>
    <li class="list-group-item">
        <div class="d-flex justify-content-between">
            <div class="d-flex flex-fill">
                <img style="width: 24px" class="me-2" src="https://via.placeholder.com/24x24.png" alt="User Avatar" />
                <div class="d-flex flex-fill align-items-center">
                    <div class="d-flex text-truncate">
                        <span class="fw-bold me-3">admin</span>
                        <span class="text-muted flex-fill text-truncate">
     admin@email.comaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                        </span>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end align-items-center">
                <span class="badge bg-danger mx-1 my-1">Admin</span>
                <span class="badge bg-success mx-1 my-1">Moderator</span>
                <span class="badge bg-secondary mx-1 my-1">User</span>
            </div>
        </div>
    </li>
    <li class="list-group-item">moderator</li>
    <li class="list-group-item">moderatoranduser</li>

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

Download CSV file directly in Internet Explorer 10 by choosing to open the file instead of saving it on your device

On my server, I have a link available to download a file: <a id="downloadCSVFile" runat="server" href="javascript:void(0)" onclick="parent.document.location = 'CSVFile.csv';">Download</a> I attempted this method as well: <a id=" ...

javascripthtmlinternet-explorer-10

What is the CSS technique to make text wrap around an image, similar to the layout seen in certain newspapers?

I am looking for a way to have my images wrap with text align in this specific layout: <html> text text text text text <br> text text text text text <br> ______________ text text text <br> image | text text text <br> i ...

htmlcssimagealignmentword-wrap

Opening multiple dialogs in Jquery Dialog box

I have several images displayed on a single page. When each image is clicked, I want a dialog box to open. I currently have 6 instances of this setup in my HTML. However, when I click on an image, all 6 dialogs pop up with the same information as the first ...

javascriptjqueryhtml

Is there a way to use jQuery to focus the cursor on a specific field in a form?

In my form, the first field is a dropdown with options such as "student" and "employee". Below that, there are two text fields for "college name" and "company name". If a person selects "student", then the "college name" text box should be enabled and t ...

jqueryhtmlcursor

Employ the v-model directive in conjunction with a checkbox in scenarios where v-for is implemented with the properties of an object

When utilizing v-model with a checkbox in conjunction with an array of objects, it functions correctly: new Vue({ el: '#example', data: { names: [ { name: 'jack', checked: true }, { name: 'john', checked ...

javascripthtmlvue.jsvuejs2

Transferring HTML5 Video data by breaking it into segments and streaming it through several HTTP/

Looking for ways to speed up the loading time of an html5 video? Is there a method to make a browser process each webm video fragment as individual TCP streams, in order to take advantage of HTTP/2's enhanced parallelization? ...

htmlhtml5-videohttp2

Icon overflowing due to Bootstrap 4 card title

I'm currently working on implementing an expand/collapse feature with a red close 'X' button in a Bootstrap 4 card. I've almost got it working, but when I try to place the red close icon outside the element that controls the expand/coll ...

htmlcssbootstrap-4

Focus on selecting each label within a table using JavaScript

In my current setup, I am attempting to customize radio buttons and checkboxes. Array.from(document.querySelectorAll("tr")).forEach((tr,index)=>{ var mark=document.createElement("span"); Array.from(tr.querySelectorAll("input")).forEach((inp,index ...

javascripthtmlcssdom-traversal

Exploring Next.js Font Styling and Utilizing CSS Variables

I'm attempting to implement the "next" method for adding fonts, but I find the process described quite complex just to preload a font. I experimented with exporting a function to create the font and then using a variable tag to generate a CSS variabl ...

javascriptcssnext.jsfonts

The <h> tag gains height on its own accord

Here is my original code: <h4 class="orange2" ><a href="<?php echo base_url();?>v/<?php echo $this->uri->segment(3);?>/<?php echo $v['uniq'];?>"><?php echo trim(strip_tags($v['video_name']));?> ...

javascriptcsshtmltwitter-bootstrap

Tips for resizing all HTML elements when adjusting browser window dimensions

I am working with the following HTML code snippet: <div id="sectionOne" class="container-fluid d-flex flex-column justify-content-center align-items-center" style="height: 80vh;"> <div class="row d-flex justify-content-center" style="color: #00 ...

htmlcssbootstrap-4

Display issue with positioning user name in navbar on Internet Explorer

The user name appears correctly in the navbar on Firefox and Chrome, but in IE it drops down due to a break tag issue. Is there a way to resolve this in IE so that it displays like in Firefox and Chrome? body { padding-top: 102px; background-colo ...

jqueryhtmlcsstwitter-bootstrap

Tips for updating the value of the most recently created div in an ng-repeat loop

Within my HTML document, the following code is present: <div ng-repeat="selection in selections" style="margin-left:{{marginLeft}}%;width:{{progress}}%;background-color:{{selection}}"> </div> In my controller, I have implemented function ...

htmlcssangularjsangularjs-ng-repeat

The PHP code fails to execute properly after being uploaded to the server

I am facing an issue with my PHP code not working when uploaded to the server. It works fine on localhost, but why is it not running properly on the server? <?php ob_start(); include 'CUserDB.php'; session_start(); include 'config.php&a ...

phphtmlmysql

CSS positioning problems thoroughly elucidated

I'm facing two issues that I can't seem to resolve. My goal is to recreate a design similar to the one found at https://i.sstatic.net/XfPqm.jpg. My first issue is with adjusting the box in the header to stay aligned next to my headline tags. The ...

htmlcssdivision

Harnessing the Power of Material UI to Revolutionize Amplify Theming

I am currently developing a React application with Material-UI and Amplify UI Components. I am looking to customize the Amplify theming. By following the guidance provided on Amplify UI Components Customization, I have been able to override CSS variables ...

cssreactjsmaterial-uiaws-amplify

Creating a responsive HTML, CSS, and JavaScript popup: A step-by-step guide

I'm facing a challenge in making my HTML, CSS, and JavaScript popup responsive. Despite looking into various resources, I haven't been able to find a solution that fits my code. However, I am confident that it is achievable to make it responsive! ...

javascripthtmlcsspopup

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

I am having trouble getting a button to trigger an animation. Currently, the animation only plays once when the page is refreshed and doesn't repeat on subsequent clicks of the button. function initiateAnimation(el){ document.getElementById("anima ...

javascripthtmlcssanimation

What is the best way to incorporate text or characters into your website using CSS only, without using

Will it be able to function in IE? I am aware that IE does not support the content property for anything outside of what? ...

htmlcsstags

When converting to HTML, LibreOffice Writer fails to display footers on even-numbered pages

I'm currently facing an issue with converting my HTML form to PDF using LibreOffice. I need to include a footer in the document, but for some reason, only odd-numbered pages display the footer. Even-numbered pages are not showing anything at all. Int ...

htmlfooterlibreoffice