How to word-break text in a flex display when the text is long?
just put word-break:break-all property to its parent div. You can see it live by clicking this JSFiddle link
.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:
- Why doesn't flex item shrink past content size?
- Applying an ellipsis to multiline text
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>