How to fix text-overflow: ellipsis (partially hidden text not working)

(We're free online community, meet other makers!)

Hey guys in this tutorial I'll show you why text-overflow ellipsis is not working on span element. We'll start with a div example and then extend it to make it work on a span too.

Why text-overflow ellipsis not working tutorial:

#css #text #overflow #ellipsis #notworking

00:00 text-overflow: ellipsis not working on span element and how to fix it
00:15 The HTML and CSS setup
00:28 Set overflow: hidden; and text-overflow: ellipsis;
00:41 to fix ellipsis on a div add white-space: nowrap;
01:17 text-overflow ellipsis not working on span because by default span display is set to inline (change it to inline-block to make it work)

Other keywords
text-overflow ellipsis multiline
text-overflow: ellipsis 2 lines
text-overflow ellipsis flex
text overflow ellipsis not working flutter
text-overflow: ellipsis not working with flex