What is the reason that the text-overflow property does not function properly within a nested flexbox

Why does my overflow text only show ellipsis when one parent element with display: flex is removed? It seems the text width determines the parent's width rather than using ellipsis. To test this behavior, try reducing the browser width in the provided jsfiddle link.

Check out the jsfiddle demo for reference

.wrap {
    	display: flex;
      	flex-wrap: wrap;
      	align-items: center;
      	background: lightgrey;
      	max-width: 600px;
      }
      
      p {
      	text-overflow: ellipsis;
      	white-space: nowrap;
      	overflow: hidden;
      	margin-right: 20px;
      }
<div class="wrap">
  <div class="wrap">
    <p>
      1) looooooooooooooooooooooooooooooooooooong text
    </p>
  </div>
</div>
htmlcss

Answer №1

One common issue arises when attempting to create a CSS text shortcut is the conflict between using flex-box layout (display: flex;) and text-overflow: ellipsis;.

The workaround for this dilemma involves setting min-width: 0; on the parent element that needs to truncate text efficiently. Simply add min-width: 0px; to your parent div, like so:

.wrap{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: lightgrey;
  min-width: 0px;  // set min width to 0px
}

Give this solution a try to resolve your issue effectively.

Answer №2

To make the flex containers work properly, you must explicitly set the width to 100%.

Here is the correct code:

.wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: lightgrey;
  max-width: 600px;
  width: 100%;
}

p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-right: 20px;
  display: block;
  width: 100%;
}
<div class="wrap">
  <div class="wrap">
    <p>
      1) looooooooooooooooooooooooooooooooooooong text
    </p>
  </div>
</div>

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

Having trouble with Firefox's functionality when dealing with Unicode characters

My goal is to make a unicode character toggle the visibility of another span element when hovered over. This functionality works in Chrome but not in Firefox. Below is the HTML code I am using: <span class="default" id="some_id"> <b id="anot ...

javascriptjqueryhtmlfirefoxunicode

Converting date formats in HTML with the help of JavaScript

I am completely new to JavaScript and would greatly appreciate any assistance. Within my HTML code, I have dates extracted from a form that need to be displayed. <body> Test Date<br> <span id="test">{{TestDate|"dd/MM/yy"}}</span> ...

javascripthtmldateformat

increasing the margin around a heading inside a container with existing padding

I'm currently struggling to apply padding to the header of this container. For some reason, I can't seem to add any padding to the left or right. The image below illustrates the current appearance. Here's the code snippet: <?php $feed = ...

htmlcss

Outputting PHP Array as an HTML Table

I need help displaying products from a specific category in an HTML table with only three columns. My current code is: <table> <?php $catagory=$_GET["q"]; $con = mysql_connect("localhost","cl49-XXX","XXX"); if (!$con) { die('Co ...

phphtmlmysqlarrayshtml-table

Is there a way to combine the input tag's name with a growing integer variable?

Within a while loop, I need to modify the names of input tags by concatenating them with an increasing integer variable. However, attempts to use the $ symbol have not yielded successful results. <html> <head> <meta http-equiv="Content- ...

htmljsp

The Jquery function for selecting a div added by an Ajax call is not functioning properly, but it works fine without the need for an

I have a unique checkbox that I created using an Ajax call. The issue I'm facing is that the jQuery to select the checked input in the second div #test_checkbox_ajax isn't working, while it works perfectly fine in the first div #test_checkbox. Cr ...

jqueryhtmlcssajax

The AddClass function fails to function properly after an ajax form is submitted

I am facing a challenge in setting up validation for my ajax form. My goal is to have a red border appear around the input field if it is submitted empty. Unfortunately, when I try to use addClass(), it does not seem to have any effect. The alert message ...

javascriptjquerycssajaxvalidation

How can I adjust the padding and width attributes of the mat-menu in Angular 5

Today, I am struggling with a piece of code. Whenever I click on the Details button, it is supposed to open a mat-menu. However, for some reason, I cannot seem to adjust the padding or width of the menu: <div id="box-upload" [hidden]="hiddenBoxUpload" ...

htmlcssangulartypescriptangular-material

Show the checked options retrieved from controller

I am facing an issue with displaying certain checkbox values from the controller. In order to properly save these values, I believe it would be best to declare them in the controller and then use them in the HTML. However, my current code is not successful ...

htmlangularjs

Is there a way to delay the start of this until a legitimate answer is provided in a pop-up window?

Is it possible to delay the loading of this content until a prompt box is answered with a valid response, and have it only appear once a month? Do I need anything beyond JS and HTML for this functionality? <script language="javascript"> function ...

javascripthtml

Save room for text that shows up on its own

I am currently dealing with a situation where text appears conditionally and when it does, it causes the rest of the page to be pushed down. Does anyone know the best way to reserve the space for this text even when it's not visible so that I can pre ...

javascriptcssvue.js

What is the most efficient method for populating *interconnected data-dependent* <select> dropdowns in a Rails application?

When users need to choose a car from our system, they are faced with multiple dropdown menus to select the year, make, model, and submodel. The challenge lies in the fact that these options are interdependent, making it necessary to retrieve data through s ...

htmlajaxperformancedrop-down-menudependencies

Attempting to align input fields and spans side by side

Is there a way to properly align multiple inputs next to each other with dots in between, resembling an IPv4 address? Currently, the span appears to float in the center. How can this be resolved? It's worth noting that all elements in the image have b ...

css

Accordion nested within another accordion

I am facing a challenge while trying to nest an accordion within another accordion. The issue is that the nested accordion only expands as much as the first accordion, requiring additional space to display its content properly. Any assistance with resolvin ...

javascriptcssaccordion

Is it possible to transfer data from javascript to php through ajax?

I am attempting to extract the data speedMbps from my JavaScript code using Ajax to send the data to my PHP script, but unfortunately, I am not receiving any output. My experience with Ajax is limited to implementing auto-completion feature. <script sr ...

javascriptphpjqueryhtmlajax

Is there a way to modify this JavaScript code so that it can function with a

I have developed a unique audio player that plays random sections of different songs. Currently, it is hardcoded for one song with three intros, a midsection, and three outros. I am looking to create a system where a list of songs can be randomly chosen fr ...

javascripthtmlhtml5-audio

Ensure the sum is recalculated whenever the input changes by using the jQuery change event

I am creating a system that requires the total values of multiple inputs to not exceed 100. I have successfully implemented this functionality, but now I need a way to automatically adjust the total if changing one input causes it to drop below 100. Here& ...

javascriptjqueryhtml

Entity designation experiencing operational difficulties

Having trouble converting my HTML to XHTML. Whenever I replace the greater than sign with &gt;, my if statement stops working properly. The same issue occurs when replacing the ampersand with & and the less than sign with <. Even CDATA isn' ...

javahtmlxhtml

The method I used to position a triangle at the bottom border of a parent element with relative

https://i.stack.imgur.com/RZjJ9.png I am trying to achieve a centered triangle within a border, but I am facing a challenge due to the parent component being relative. When I remove the relative positioning, I struggle to position the triangle in the cent ...

htmlcssreactjsstyled-components

Prevent the occurrence of a fixed height problem associated with the Bootstrap Navbar (Mega Menu)

In my project, I have a Custom Mega Menu that dynamically creates code to display all Nav bar entries. Since changing the logic of Mega menu creation is difficult, I am looking for a CSS solution to avoid fixed height in bootstrap columns. My code structu ...

htmlcsstwitter-bootstrapbootstrap-4