Ellipsis in flexbox container
This was eventually tracked down to recent changes in Firefox Nightly. Long story short, setting min-width: 0 on the .column selector will make it work as expected.
A more comprehensive answer can be found here. Of note:
"Basically: flex items will refuse to shrink below their minimum intrinsic width, unless you explicitly specify "min-width" or "width" or "max-width" on them."
The working solution:
.container { width: 300px; background: red;}
.row { display: flex; flex-direction: row; flex-wrap: wrap;}
.column { /* This will make it work in Firefox >= 35.0a1 */ min-width: 0; flex-basis: 50%;}
.column p { background: gold; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}<div class="container"> <div class="row"> <div class="column"> <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p> </div> <div class="column"> <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p> </div> </div></div>How to make ellipsis work in a flex container?
Your flex item with the ellipsis must be able shrink below the width of the content. See my answer here for complete details: Why don't flex items shrink past content size?
revised codepen
body { padding: 20px;}
.container { display: flex; border: 1px dashed red; /* demo */}
.block { flex: 0 0 25px; /* flex-grow, flex-shrink, flex-basis */ /* set flex-shrink to 0 to prevent item from shrinking below 25px */ padding: 10px; background-color: yellowgreen; display: flex; align-items: center; justify-content: center; margin-right: 20px;}
.text { display: flex; min-width: 0; /* allow item to shrink below content size */}
.truncate { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 20pt; background-color: yellow; /* demo */}<div class="container"> <div class="block">B</div> <div class="text"> <div class="truncate"> 3. This is a long string that is OK to truncate please and thank you </div> </div></div>Using Flexbox and text ellipsis together with intermediate container
Found the solution :)
no need to add any css to the inner divs
just:
.parent-flex {
flex: auto;
flex-direction: column;
padding: 0 20px;
min-width: 0px;
}
h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Using text-overflow: ellipsis with flexbox
There are several changes you need to make in order to obtain the desired behavior. First of all, you need to understand you're dealing with a negative space scenario in flexbox. That's when the sum of lengths of contents is bigger than the available parent length.
In this case, flexbox calculates the difference between them and tries to distribute the difference evenly between children which allow flex-shrink, according to each child's flex-shrink factor.
So you need to set .name-price-container's flex-shrink to 1:
.name-price-container {
flex: 1 1 auto;
}
Without it, ellipsis won't happen, as the contents (your <a>) will always grow as much as they need to and thus set the width, hence the flex-basis, of .name-price-container (which can't currently shrink). Hence, no ellipsis.
Your second problem is with the fact <a> elements, by default have a display of inline. In order to make ellipsis work you need a method to limit its width. The simplest would be to give it display:block (because now the parent is shrunk). An alternative would be to move the ellipsis effect to the span and give that span width: 100%.
Finally, you want to prevent .btn-container from shrinking and remove its overflow. Give it flex-shrink: 0 and remove overflow: hidden from it.
By the way, body * { overflow: hidden; } is really something you want to avoid, as it overrides the default value of overflow for every single element in your page. There are a lot of elements which will no longer work as expected if you change that. Dropdowns, tooltips, popovers and modals, to name a few.
Here's your working example:
@import url('https://fonts.googleapis.com/css?family=Open+Sans');* { font-family: 'Open Sans', Helvetica, Arial, sans-serif;}body { background-color: #e6ebf0;}ul { padding-left: 0;}ul li { list-style: none;}ul li img { width: 100%;}.img-container { background-color: #343a40; border: 1px solid #343a40; display: flex; flex: 1 0 auto; flex-direction: column; justify-content: center; align-items: center;}form { display: inline;}.btn-light { background-color: white; border: 1px solid #ced4da;}.row { margin: 0;}.product { display: flex;}.product,.total { margin-top: 0.5rem; padding: 1rem; background-color: white; border: 1px solid #ced4da; border-radius: 4px;}.product .img-container { background-color: #343a40; border: 1px solid #343a40; box-sizing: unset; height: 128px; width: 128px; flex: 0 0 auto;}.product .img-container img { display: block; max-height: 128px; max-width: 128px; width: auto; height: auto;}.name-price-container { margin: 0 1rem; display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; min-width: 0;}.name-price-container a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.name-price-container a,.name-price-container a:hover { color: #212529;}.btn-container { height: 130px; line-height: 130px; min-width: 0; white-space: nowrap;}.btn-container .btn { margin: 0; display: inline-block;}@media all and (max-width: 768px) { .product .img-container { height: 64px; width: 64px; } .product .img-container img { max-width: 64px; max-height: 64px; } .btn-container { height: 66px; line-height: 66px; flex-shrink: 0; }}<div class="container"> <ul> <li class="row product"> <div class="img-container"> <a href="/gallery/product?id=21"> <img src="https://i.imgur.com/CyYN9a7.jpg" alt="Vials"> </a> </div> <div class="name-price-container"> <span> <a href="/gallery/product?id=21">Vials Loooooooooong Text</a> </span> <span>$30.00</span> </div> <div class="btn-container"> <form method="POST" action="/gallery/remove_cart"> <input type="hidden" name="csrfmiddlewaretoken" value="..."> <input type="hidden" name="id" value="21"> <input type="submit" class="btn btn-light" value="Remove"> </form> </div> </li> <li class="row product"> <div class="img-container"> <a href="/gallery/product?id=22"> <img src="https://i.imgur.com/PoCaEjw.jpg" alt="Driftbird"> </a> </div> <div class="name-price-container"> <span> <a href="/gallery/product?id=22">Driftbird Loooooooooong Text</a> </span> <span>$25.00</span> </div> <div class="btn-container"> <form method="POST" action="/gallery/remove_cart"> <input type="hidden" name="csrfmiddlewaretoken" value="..."> <input type="hidden" name="id" value="22"> <input type="submit" class="btn btn-light" value="Remove"> </form> </div> </li> <li class="row product"> <div class="img-container"> <a href="/gallery/product?id=19"> <img src="https://i.imgur.com/KxAyAyE.jpg" alt="Dragon"> </a> </div> <div class="name-price-container"> <span> <a href="/gallery/product?id=19">Dragon Loooooooooong Text</a> </span> <span>$300.00</span> </div> <div class="btn-container"> <form method="POST" action="/gallery/remove_cart"> <input type="hidden" name="csrfmiddlewaretoken" value="..."> <input type="hidden" name="id" value="19"> <input type="submit" class="btn btn-light" value="Remove"> </form> </div> </li> </ul></div>text-overflow: ellipsis not working on nested flex container
You need to remove flex for .label and to align, use align-items: center; for its parent.
.parent-container { align-items: stretch; display: flex; flex-flow: column nowrap; width: 100%;}
.item-container { border: 1px solid #ebf0ff; border-radius: 0.25rem; display: flex; align-items: center; flex-flow: row nowrap; height: 3.25rem; margin: 0.5rem 1rem; padding: 0.5rem 1rem;}
.label { flex-flow: row nowrap; font-family: sans-serif; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}<!DOCTYPE HTML>
<html>
<body> <div class="parent-container"> <div class="item-container"> <span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div> </div></body>
</html>Use text-overflow: ellipsis and flexbox align-items: center in combination
text-overflow: ellipsis won't work on flex container (display: flex).
The main reason is that the text node becomes a anonymous flex child and needs min-width: 0 to behave (or else it won't shrink beyond its content size), but as one can't target a text node with CSS, we need to wrap it, here done with a span.
Here's a post that have a great explanation for The Automatic Minimum Size of Flex Items
Note 1: The parent overflow is caused by the width + padding, and box-sizing: border-box will fix that.
Note 2: For the align-items: center to have an effect, the item need a height, here given 50px.
Stack snippet
.wrapper { display: flex; flex-direction: column; background-color: lightcoral; padding: 10px;}
.wrapper__item { align-self: flex-start; max-width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 5px 10px; border: 1px solid black; border-radius: 5px; margin-bottom: 10px; background-color: white; height: 50px;}.wrapper__item span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}<div class="wrapper"> <div class="wrapper__item"><span>Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</span></div>
<div class="wrapper__item">Proin eget tortor ri.</div>
<div class="wrapper__item">Proin eget tortor ri.Proin eget tortor ri.</div></div>Setting ellipsis on text from a flex container
The ellipsis need to be set on the text element, not on the container:
.target { display: flex; align-items: center; width: 300px; height: 50px; border: solid 1px red; white-space: nowrap;}
span { overflow: hidden; text-overflow: ellipsis;}<label class="target"> <span>Text here is very very long that it might get truncate if this box get resized too small</span></label>Related Topics
Apply Webkit Scrollbar Style to Specified Element
Css: Transform: Translate(-50%, -50%) Makes Texts Blurry
Getting Columns to Wrap in CSS Grid
CSS Background-Position Not Working in Mobile Safari (Iphone/Ipad)
Minmax Fails (Invalid Property Value)
<!--[If Ie]> Conditional Comments Are Rendered HTML-Escaped in Facelets
How to Select First and Last Td in a Row
How to Disable the Clear Button That Ie10 Inserts into Textboxes
How to Generate a Box-Shadow That Follows the Shape of a Clip-Path Polygon
CSS Class and Id with the Same Name
Clip/Crop Background-Image with CSS
How to Style Disabled Textarea in IE8
Selector for Nth Nested Elements