Combining text overflow: ellipsis with display: flex
I would like to use display: flex;
for centering as well as ...
text overflow. It seems that as soon as I enter the display: flex
ellipsis will stop working. Any suggestions on how to combine the two? JSFiddle: https://jsfiddle.net/silverwind/sw78h02b/1/
.target {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: red;
margin: 2rem;
display: flex; /* remove this to get ellipsis to show */
}
<div class="target">
Text here is very very long that it will overflow the width of the containing element. Adding another sentence to make sure it will overflow.
</div>
+3
source to share
1 answer
Place your text inside span
and use display: flex
for parent and text overflow on span.
.target {
background: red;
margin: 2rem;
display: flex;
}
span {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<div class="target">
<span>Text here is very very long that it will overflow the width of the containing element. Adding another sentence to make sure it will overflow.</span>
</div>
+3
source to share