How to only make the middle flex component responsive?

user_19263681 0
Viewed 32

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: enter image description here

When I change from desktop view to mobile view I want my result to be like this enter image description here

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

enter image description here

Please guide me on how to decrease the width of only the middle component and also add ... when part of the middle component disappears.

css javascript
1 Answers

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>

user_155451160
Related