#Dolphin browser text overflow ellipsis code

It turns out, in order for this to work in a flexible manner, we have to add some 'less clean' constraints to the flex item, even though we'd really prefer to have those constraints isolated within the content.ĪSIDE: We could also set a fixed-width on the long-text content container. We don't get our text-truncation effect until we also add overflow: hidden to the CSS Flexbox item. In an insane world, it was the sanest choice.Īgain, note that the only difference between the two CSS Flexbox layouts is that the second one has an inline style:Īnd, when we run run this in the browser, we get the following output:Īs you can see, in the first example, the text just runs right off the screen despite the fact that the CSS Flexbox layout has a max-width set. Over the years, this thing, this machine, was the only one who measured Of all the would-be fathers who came and went Or say it couldn't spend time with him because it was too busy. it would always be there.Īnd it would never hurt him, never shout at him or get drunk and hit him, Would never stop, it would never leave him. Watching John with the machine, it was suddenly so clear. In the following code, I have two copies of the CSS Flexbox layout differentiated only by the fact that the second copy has an inline style attribute that applies overflow: hidden:ĬSS Flexbox, Overflow, Text-Overflow Ellipses, And A Separation Of ConcernsĮven though the long-text container is setup to truncate text and show anĮllipses as needed, it STILL needs a constraint - something to tell it not to Then, within the flex layout, the content attempts to constrain itself using text-overflow: ellipses. The 'flex layout', in this case, is trying to do nothing but layout the content.

To see what I mean, I've put together a simple CSS Flexbox demo in which we have two Flexbox items: a left and right panel.

#Dolphin browser text overflow ellipsis code

View this code in my JavaScript Demos project on GitHub. Run this demo in my JavaScript Demos project on GitHub.

As I've come to understand, in order for text-overflow and an ellipses to work within a CSS Flexbox container, the Flexbox container has to take on an overflow property that is not strictly isolated by its own separation of concerns. Take, for example, the interplay between a CSS Flexbox container and the text-overflow property of its children. That said, the separation of concerns is not always perfectly clean - sometimes there has to be some pragmatic overlap. And while this separation of concerns incurs more verbosity, it leads to cleaner, easier-to-maintain HTML and CSS. As I've gotten older (and hopefully wiser), I've grown to love the separation of concerns between layout and content.