Prevent wrapping in CSS Flexbox - html

Question

I have a re-sizable sidebar using Javascript. The problem is when the size of the sidebar is less than the content's wrapping occurs. (i think because of flex-box).
My grid is based on Rows and Columns kinda like Bootstrap.
.column {
flex-basis: 0;
max-width: 100%;
flex-grow: 1;
}
.row {
display: flex;
flex-wrap: nowrap;
margin: 0 -1rem;
}
What I want to achieve is truncating the content (without shrinking) indicating that there is more.
Here is a fiddle with what i achieved so far.

Answer 1

When it comes to Flexbox, you need to set min-width: 0 or overflow: hidden to every level, down from the child of the element with the width constraint, to the one having ellipsis.
So in this case, from the sidebar's child, and the reason is that a flex item's min-width defaults to auto, which mean it can't be smaller than its content.
To make it easy to follow how I mean, I created a flex-ellipsis class and added it to all elements down that chain.
Note, I also removed the negative margin, margin: 0 -1rem;, from the row class, or else one can't see the ellipsis.
Updated fiddle
Stack snippet
const resizeHandle = document.getElementsByClassName("vertical-resize")[0];
const navbar = document.getElementById('sidebar');
function resizeNavbar(e) {
let size = (e.pageX + 5);
navbar.style.width = (e.pageX + 5) + "px";
}
function removeEvents() {
document.removeEventListener('mousemove', resizeNavbar);
document.removeEventListener('mouseup', resizeNavbar);
}
resizeHandle.addEventListener('mousedown', () => {
document.addEventListener('mousemove', resizeNavbar);
document.addEventListener('mouseup', removeEvents);
});
* {
user-select: none;
color: #dadada;
}
.flex-ellipsis {
min-width: 0; /* added */
/* or overflow: hidden; */
}
p,
h6 {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.rounded-circle {
border-radius: 50% !important;
}
.no-margin {
margin: 0 !important;
}
.column {
flex-basis: 0;
max-width: 100%;
flex-grow: 1;
background: #4a4a4a;
}
.column-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%;
}
.row {
display: flex;
flex-wrap: nowrap; /*Even though no-wrap it still wraps as shown in picture.*/
/*margin: 0 -1rem;*/
}
.custom {
margin: auto;
padding: 10px 0px;
flex-wrap: nowrap;
}
.vertical-resize {
position: relative;
right: 0;
top: 0;
cursor: col-resize;
width: 5px;
background: aquamarine;
height: 100vh;
}
<div class="row">
<div id="sidebar" style="width: 570px;">
<div class="align-items-center row custom flex-ellipsis" id="sidebar">
<div style="max-width: 2.5rem;" class="column-1">
<img class="rounded-circle" style="max-width: 28px; min-width: 28px;" alt="Avatar" src="https://d30y9cdsu7xlg0.cloudfront.net/png/138926-200.png">
</div>
<div class="column flex-ellipsis">
<div class="row">
<div class="column">
<p class="no-margin">Ahmed Tarek</p>
</div>
</div>
<div class="row flex-ellipsis">
<div class="column flex-ellipsis">
<h6 style="font-size: 11px;" class="no-margin">01 January, 0001</h6>
</div>
</div>
</div>
</div>
</div>
<div class="vertical-resize"></div>
<div class="column">
</div>
</div>

Answer 2

You need to use text-overflow property along with other properties inside a media query or per your needs.
e.g
.list {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 48px; /* just for test */
}
<div class="list">
this is a ver long list this is a ver long list this is a ver long list.
</div>
Hope this will help you out.

Answer 3

As you have not shared full code with us, it will be difficult for us to provide you working solution. But you can add this css to your code with you want to truncate.
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
This will help you with text truncate with "..."