Question 43627 in Html Question posted in
Some basic documentation can be found here.

How to keep a flexbox from expanding horizontally – Html

I have been all over the net, tried many solutions, none of which work. I have a container that will house several rows (like a data grid). The row is defined in the following manner:

.container{
  width: 500px;
  height: 300px;
  border: 2px solid 
}
.row{
  width: 100%;
  height: 48px;
  background-color: dodgerblue;
  display: flex;  
  align-items:center;
}
.row-left{
  width: 60px;
  display: flex;  
  height: 100%;
  background-color: red;
}
.row-middle{
  flex:1 0 0;  
  background-color: green;
}
.row-right{
  width: 100px;
  height: 100%;
  background-color: yellow;
}
.subject{
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<div class="container">
  <div class="row">
    <div class="row-left">X</div>
    <div class="row-middle">
      <div class="subject">
      This is what I am supposed to look like.
      </div>
    </div>
    <div class="row-right">X</div>
  </div>
  <div class="row">
    <div class="row-left">X</div>
    <div class="row-middle">
      <div class="subject">
      This is what I look like when my text is too long.  How can we possibly fix this to hide the overflow and ellipses the text?
      </div>
    </div>
    <div class="row-right">X</div>
  </div>  
</div>

I need to keep row-middle a static size and handle the text overflow with ellipses.

Tags:

2

Answers


  1. 0

    You can use -webkit-line-clamp property

    .container{
  width: 500px;
  height: 300px;
  border: 2px solid 
}
.row{
  width: 100%;
  height: 48px;
  background-color: dodgerblue;
  display: flex;  
  align-items:center;
}
.row-left{
  width: 60px;
  display: flex;  
  height: 100%;
  background-color: red;
}
.row-middle{
  flex:1 0 0;  
  background-color: green;
}
.row-right{
  width: 100px;
  height: 100%;
  background-color: yellow;
}
.subject{
  width: 100%;
  height: 100%;
   display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}
    <div class="container">
  <div class="row">
    <div class="row-left">X</div>
    <div class="row-middle">
      <div class="subject">
      This is what I am supposed to look like.
      </div>
    </div>
    <div class="row-right">X</div>
  </div>
  <div class="row">
    <div class="row-left">X</div>
    <div class="row-middle">
      <div class="subject">
      This is what I look like when my text is too long.  How can we possibly fix this to hide the overflow and ellipses the text?
      </div>
    </div>
    <div class="row-right">X</div>
  </div>  
</div>

    You can read more about it over here

    Also, please do check browser compatibility

    Login or Signup to reply.
  2. 0

    A flex item’s minimum width defaults to the width of its content. Since the text is inside an element, this explains why the long text is blowing out the layout.

    A way to adjust for this problem is to give the flex item a min-width: 0 style.

    .row-middle{
  …
  min-width: 0;
}

    .container{
  width: 500px;
  height: 300px;
  border: 2px solid 
}
.row{
  width: 100%;
  height: 48px;
  background-color: dodgerblue;
  display: flex;  
  align-items:center;
}
.row-left{
  width: 60px;
  display: flex;  
  height: 100%;
  background-color: red;
}
.row-middle{
  flex:1 0 0;  
  background-color: green;
  min-width: 0;
}
.row-right{
  width: 100px;
  height: 100%;
  background-color: yellow;
}
.subject{
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
    <div class="container">
  <div class="row">
    <div class="row-left">X</div>
    <div class="row-middle">
      <div class="subject">
      This is what I am supposed to look like.
      </div>
    </div>
    <div class="row-right">X</div>
  </div>
  <div class="row">
    <div class="row-left">X</div>
    <div class="row-middle">
      <div class="subject">
      This is what I look like when my text is too long.  How can we possibly fix this to hide the overflow and ellipses the text?
      </div>
    </div>
    <div class="row-right">X</div>
  </div>  
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search