    
|
|
|
With every new revision of CSS, a plethora of new, exciting attributes come to light; one of which being the understated display: flex approach.
The flexbox layout model has been floating around the web for a little while now, each time with its own variation on the approach (some outdated, such as the display: box or display: flexbox method).
In today’s guide, we’ll be discovering the advantages of utilising the flexbox technique in our own layouts.
Some great features of the new model include:
Stay tuned for next time, where we’ll be taking a look on how to take this even further, and turn your flexbox layout into a fully-fledged responsive design!
Have you used the flex box approach to layout? Do you prefer a different method? Let us know in the comments.
Featured image/thumbnail, flexible image via Shutterstock.
| Hiruko: Japanese Inspired Font Family – only $9! |
 |
You want X lines of text. Anything after that, gracefully cut off. That's "line clamping" and it is a perfectly legit desire. When you can count on text being a certain number of lines, you can create stronger and more reliable grids from the elements that contain that text, as well as achieve some symmetric aesthetic harmony.
There are a couple of ways to get it done, none of them spectacular.
In case that explanation wasn't clean, imagine you have some HTML like this:
<div class="module">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>And you want to limit it to exactly three lines in a container. Like this:
In all these examples, let's assume we have a "module".
.module {
width: 250px;
overflow: hidden;
}David DeSandro showed us this little ditty a few years ago.
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}One one hand, this is awesome and exactly what we need. CSS the perfect place for this. It's a real need and it should be this simple.
On the other hand... it's weird. why does it need to be a flexbox thing (the old version at that)? It doesn't work without that. And it's extremely fragile. Let's say you want the module (or the paragraph) to have some padding. You can't, because the padding will expose extra lines. That's what we get with half-baked non-standardized properties.
The root of this technique is just setting the height of the module in a predictable way. Let's say you set the line-height to 1.2em. If we want to expose three lines of text, we can just make the height of the container 3.6em (1.2em × 3). The hidden overflow will hide the rest.
But it can be a bit awkward to just the text off like that. Ideally we would add ellipsis, but we can't reliably position them. So instead we'll fade out the text achieving the same kind of communication ("there is more...").
To fade out the last line, we make a box (a pseudo element will work great) and overlay a transparent-to-background-color gradient over the top. Making it nearly as wide as the container is best in case the last line is short. Because we know the line-height, we can make the pseudo element box exactly one line tall.
.fade {
position: relative;
height: 3.6em; /* exactly three lines */
}
.fade:after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 70%;
height: 1.2em;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}Like WebKit, Opera has their own way to handle this. They apply ellipsis on the line you wish to. Of course the clock is ticking for Presto (Opera's rendering engine pre-Blink) so this isn't particularly useful. Perhaps it can still inform a future implementation though.
.last-line {
height: 3.6em; /* exactly three lines */
text-overflow: -o-ellipsis-lastline;
}Where there is a will there is a way (with JavaScript). I think that's a saying. Joseph J. Schmitt has an excellent library-free JavaScript thingy called Clamp.js for making this happen in a cross-browser way.
var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});Make sure you target the element with the text directly inside of it. Originally I tried putting the ID on the module, which worked in Chrome/Safari, but failed in Firefox. Putting it on the <p> made it work in both (Thx Merri).
Check out this Pen!
Vesa Piittinen created an alternative method to Clamp.js.
Unlike Clamp.js it retains all the text within the clamped element and uses text-overflow to do the magic.
FT Labs also has created a JavaScript plugin to do the job. It's nice in that you don't have to specify the number of lines, it just happens when the text overflows the container, so the design decision stay in the CSS.
Both of these examples have been added to the main Pen.
jQuery Conference Portland 2013 has a limited number of regular tickets still available. Two days. Two tracks. Fresh speakers. Jun 13-14. $50 off for members of the jQuery Foundation. Join today and get your first year of fan dues paid for with purchase of both a training and conference ticket. Training provided by Bocoup on Jun 12. Use coupon code CSSTricks25off for $25 off.
Line Clampin’ is a post from CSS-Tricks
]]>Our goal with the Thief of Thieves Experience is to deliver an immersive experience through Internet Explorer 10 equal to one you’d typically find in a native application. We do this by using the latest in HTML5, CSS3, touch, and related technologies. This article will explore the techniques used to develop the app.
]]>Microsoft’s MDOP for IT management also known as Microsoft’s Desktop Optimization Pack receives a list of new IT administration capabilities for Windows 8.
]]>Adobe has re-engineered Flash Professional as a 64-bit application including real-time mobile testing and a new code editor for HTML5.
]]>