EN
CSS - text-overflow: ellipsis with nested display: flex elements
6 points
In this article, we're going to have a look at how to in a simple way in pure CSS cut overflowing text for multiple nested elements with flex-box.
Quick solution:
xxxxxxxxxx1
<style>2
3
.parent-fix { /* with display: flex; styled element */4
min-width: 0;5
}6
7
.text-shortcut { /* with display: block; styled element */8
text-overflow: ellipsis;9
white-space: nowrap;10
overflow: hidden;11
}12
13
</style>14
15
<div style="width: 100px; display: flex">16
<div class="parent-fix" style="display: flex">17
<div class="text-shortcut">18
Very long text here, Very long text here, Very long text here19
</div>20
</div>21
</div>
A verry common problem when we try to make CSS shortcut for text is: when we try to combine flex-box layout (display: flex;) with text-overflow: ellipsis.
The solution for this problem is to use min-width: 0 for parent element that we want to shortcut text.
Note: when
div.shortcutelement will be in flex-box mode (display: flex),text-overflow: ellipsiswill be not working.Conclusion: use
ellipsisalways with block element, wrapping text with aditional element when it is necessary.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div { padding: 5px; border: 1px solid red; }7
8
div.h-container { display: flex; }9
div.v-container { display: flex; flex-direction: column; }10
div.item { flex: 1; }11
12
div.fix {13
min-width: 0; /* <--------------- required */14
}15
16
div.shortcut {17
text-overflow: ellipsis; /* <---- required */18
white-space: nowrap; /* <-------- required */19
overflow: hidden; /* <----------- required */20
}21
22
</style>23
</head>24
<body>25
<div class="h-container">26
<!- |fix here (for flex element) ->27
<!- v ->28
<div class="item v-container fix">29
<div class="item shortcut"> <!- ---------- shortcut here (block element) ->30
Very long text here, Very long text here, 31
Very long text here, Very long text here32
</div>33
<div class="item">34
Nothing here35
</div>36
</div>37
<div class="item">38
Nothing here39
</div>40
</div>41
</body>42
</html>