All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden. .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Note the fixed width in use here. The gist is that the element needs some kind of determinate width, which you have to be particularly careful about with flexbox: