0
209
ViewsHow to only make the middle flex component responsive?
I have a parent component who has three child components. The display is set to flex and flex-direction to row.
here is the code
JS part:
<div className='Container'>
<div className='Text1'>26 Dec 22</div>
<div className='Text2'>Lorem ipsum dolor sit amet</div>
<div className='Text3'>128K</div>
</div>
CSS part:
.Container{
display: flex;
flex-direction: row;
background-color: white;
padding: 20px 20px 20px 20px;
justify-content: space-evenly;
gap:10px;
}
.Text1{
width: 100px;
white-space: nowrap;
}
.Text2{
text-align: left;
width: 400px;
}
.Text3{
width: 100px;
}
Here is the image of the output:
When I change from desktop view to mobile view I want my result to be like this
As one can see only the middle component text was eliminated and ... was added.
In my above code when I change the view I get the result as
Please guide me on how to decrease the width of only the middle component and also add ... when part of the middle component disappears.
1 answers
Answer question0
In your case, you need the text-overflow: ellipsis; CSS property and use it on the middle element.
The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string. MDN documentation
.Container {
display: flex;
flex-direction: row;
background-color: white;
padding: 20px 20px 20px 20px;
justify-content: space-evenly;
gap: 10px;
}
.Text1 {
width: 100px;
white-space: nowrap;
}
.Text2 {
text-align: left;
width: 400px;
text-overflow: ellipsis; /* new line */
overflow: hidden; /* new line */
white-space: nowrap; /* new line */
}
.Text3 {
width: 100px;
}<div class="Container">
<div class="Text1">26 Dec 22</div>
<div class="Text2">Lorem ipsum dolor sit amet</div>
<div class="Text3">128K</div>
</div>