![]() ![]() 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. 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. It’s pretty easy to see when width is set to min-content.As I've gotten older (and hopefully wiser), I've grown to love the separation of concerns between layout and content. The difference is in how it affects the min-content size calculation of the element it’s on. There’s also overflow-wrap: anywhere, which breaks words in the same manner. See the Pen overflow-wrap: break-word by Will Boyd ( on CodePen. ![]() It’ll first try to keep a word unbroken by moving it to the next line, but will then break the word if there’s still not enough room. Putting overflow-wrap: break-word on an element will allow text to break mid-word if needed. Fortunately, CSS gives us some tools for this. It’s good defensive coding to anticipate issues from text not breaking. For example, the text may overflow its container, or it might force the container to become too wide and push things out of place. This can cause all sorts of layout issues. But sometimes you may find yourself with long spans of text that don’t have soft wrap opportunities, such as really long words or URLs. Normally, text flows to the next line at “soft wrap opportunities”, which is a fancy name for spots you’d expect text to break naturally, like between words or after a hyphen. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |