How to word-break text in a flex display when the text is long?

Question

I need to make a responsive web, so that the width of parent is dynamic. There are two flex items, one is long (dynamic) and another one is short (static).

I hope the result can look like the second line, that the long text is broken (or hidden when overlap), and the short text is always displayed correctly.

I tried to use flex-shrink: 0 but seems there is always an overflow.

How can I get rid of the overflow in this case?

I do need flex layout, and the js should not be involved.

.parent {
  display: flex;
  flex-direction: row;
  width: 15rem;
  background: yellowgreen;
  padding: 10px;
  overflow: hidden;
}
.flex-item {
  width: 10em;
  padding: 10px;
  background: yellow;
  flex: 1 1 50%;
}
.block1 {
  background: red;
}
.block2 {
  background: orange;
}
.nos {
  flex-shrink: 0 !important;
}

<div class="parent">
  <div class="flex-item">
    <div class="block1">
      longlonglonglonglonglonglonglonglonglonglonglonglonglong
    </div>
  </div>
  <div class="flex-item nos">
    <div class="block2">
      Display
    </div>
  </div>
</div>
<br/>
<div class="parent">
  <div class="flex-item">
    <div class="block1">
      longlonglonglonglong...
    </div>
  </div>
  <div class="flex-item">
    <div class="block2">
      Display
    </div>
  </div>
</div>

https://jsfiddle.net/templefox/Lw3hhz8j/

Im also coding a flex-display atm, why can't I just `
`eak a line? — Penguin9, Jan 16 '17 at 13:15

Shubham Baranwal · Answer 1 · 2020-04-24T05:52:17.230

10

just put word-break:break-all property to its parent div. You can see it live by clicking this JSFiddle link

edited Apr 24 '20 at 05:52

answered Jan 16 '17 at 12:49

Shubham Baranwal

2,492
3
14
26

Abhishek Pandey · Answer 2 · 2017-01-16T08:45:03.700

Something like this.

*{
  box-sizing:border-box;
}
.parent {
    display: flex;
    flex-direction: row;
    width: 16rem;
    background: yellowgreen;
    padding: 10px;
    overflow: hidden;
    position: relative;
}
.flex-item {
    width: 100%;
    padding: 10px;
    background: yellow;
    flex: 1 1;
}
.block1 {
  background: red;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right:70px;
}
.block2 {
  background: orange;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nos {
    flex-shrink: 0 !important;
    position: absolute;
    right: 10px;
    max-width: 70px;
}

<div class="parent">
  <div class="flex-item">
    <div class="block1">
      longlonglonglonglonglonglonglonglonglonglonglonglonglong
    </div>
  </div>
  <div class="flex-item nos">
    <div class="block2">
      Display
    </div>
  </div>
</div>

score 2 · Accepted Answer · edited May 23 '17 at 12:16

.parent {
   display: flex;
   width: 15rem;
   padding: 10px;
   background: yellowgreen;
   /* overflow: hidden       <-- not necessary at this point */
   /* flex-direction: row    <-- default value; can be omitted */
}
.flex-item {
   /* width: 10em            <-- not necessary at this point */
   /* flex: 1 1 50%          <-- not necessary at this point */
   padding: 10px;
   background: yellow;
   display: flex;            /* new */
   min-width: 0;             /* see note #1 */

}
.block1 {
   width: 10em;
   overflow: hidden;         /* see note #2 */
   text-overflow: ellipsis;  /* see note #2 */
   white-space: nowrap;      /* see note #2 */
   background: red;
}
.block2 {
  background: orange;
}

/* .nos { flex-shrink: 0 !important; } */

<div class="parent">
  <div class="flex-item">
    <div class="block1">longlonglonglonglonglonglonglonglonglonglonglonglonglong</div>
  </div>
  <div class="flex-item">
    <div class="block2">Display</div>
  </div>
</div>
<br/>
<div class="parent">
  <div class="flex-item">
    <div class="block1">longlonglonglonglong...</div>
  </div>
  <div class="flex-item">
    <div class="block2">Display</div>
  </div>
</div>

revised fiddle

Notes:

How to word-break text in a flex display when the text is long?

3 Answers3