It’s no secret that MDN rolled out a brand new design again in March. It’s attractive! And there are some candy CSS-y gems in it which might be enjoyable to take a look at. A type of gems is how card parts deal with truncated textual content.
Fairly cool, yeah? I wanna tear that aside in only a bit, however a few issues actually draw me into this strategy:
It’s an instance of deliberately chopping off content material. We’ve referred to that as CSS information loss somewhere else. And whereas information loss is mostly a nasty factor, I like the way it’s getting used right here since excerpts are supposed to be a teaser for the complete content material.That is totally different than truncating textual content with text-overflow: ellipsis, a subject that got here up somewhat just lately when Eric Eggert shared his considerations with it. The principle argument in opposition to it’s that there isn’t a option to get well the textual content that will get reduce off within the truncation — assistive tech will announce it, however sighted customers haven’t any option to get well it. MDNs strategy gives a bit extra management in that division because the truncation is merely visible.
So, how did MDN do it? Nothing too fancy right here as far the HTML goes, only a container with a paragraph.
<div class=”card”>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore consectetur temporibus quae aliquam nobis nam accusantium, minima quam iste magnam autem neque laborum nulla esse cupiditate modi impedit sapiente vero?</p>
</div>
We are able to drop in just a few baseline kinds to shore issues up.
Once more, nothing too fancy. Our objective is reduce the content material off after, say, the third line. We are able to set a max-height on the paragraph and conceal the overflow for that:
.card p {
max-height: calc(4rem * var(–base)); /* Set a cut-off level for the content material */
overflow: hidden; /* Reduce off the content material */
}
Whoa whoa, what’s up with that calc() stuff? Discover that I arrange a –base variable up entrance that can be utilized as a standard multiplier. I’m utilizing it to compute the font-size, line-height, padding for the cardboard, and now the max-height of the paragraph. I discover it simpler to work with a continuing values particularly when the sizing I want is absolutely primarily based on scale like this. I observed MDN makes use of an analogous –base-line-height variable, most likely for a similar function.
Getting that third line of textual content to fade out? It’s a traditional linear-gradient() on the pargraph’s :after pseudo-element, which is pinned to the bottom-right nook of the cardboard. So, we will set that up:
.card p:after {
content material: “”; /* Wanted to render the pseudo */
background-image: linear-gradient(to proper, clear, var(–background) 80%);
place: absolute;
inset-inline-end: 0; /* Logical property equal to `proper: 0` */
}
Discover I’m calling a –background variable that’s set to the identical background colour worth that’s used on the .card itself. That manner, the textual content seems to fade into the background. And I discovered that I wanted to tweak the second colour cease within the gradient as a result of the textual content isn’t utterly hidden when the gradient blends all the best way to 100%. I discovered 80% to be a candy spot for my eyes.
And, sure, :after wants a peak and width. The peak is the place that –base variables comes again into play as a result of we wish that scaled to the paragraph’s line-height with a purpose to cowl the textual content with the peak of :after.
.card p:after {
/* identical as earlier than */
peak: calc(1rem * var(–base) + 1px);
width: 100%; /* relative to the .card container */
}
Including one further pixel of peak appeared to do the trick, however MDN was in a position to pull it off with out it after I peeked at DevTools. Then once more, I’m not utilizing high (or inset-block-start) to offset the gradient in that route both. 🤷♂️
Now that p:after is completely positioned, we have to explicitly declare relative positioning on the paragraph to maintain :after in its circulate. In any other case, :after can be utterly yanked from the doc circulate and wind up outdoors of the cardboard. This turns into the complete CSS for the .card paragraph:
.card p {
max-height: calc(4rem * var(–base)); /* Set a cut-off level for the content material */
overflow: hidden; /* Reduce off the content material */
place: relative; /* wanted for :after */
}
We’re accomplished, proper? Nope! The dang gradient simply doesn’t appear to be in the proper place.
I’ll admit I brain-farted on this one and fired up DevTools on MDN to see what the heck I used to be lacking. Oh yeah, :after must be displayed as a block component. It’s clear as day when including a pink border to it.🤦♂️
.card p:after {
content material: “”;
background: linear-gradient(to proper, clear, var(–background) 80%);
show: block;
peak: calc(1rem * var(–base) + 1px);
inset-block-end: 0;
place: absolute;
width: 100%;
}
All collectively now!
And, yep, appears feels like VoiceOver respects the complete textual content. I haven’t examined another display screen readers although.
I additionally observed that MDN’s implementation removes pointer-events from p:after. In all probability defensive tactic to forestall odd behaviors when deciding on textual content. I added it in and deciding on textual content does really feel just a little smoother, no less than in Safari, Firefox, and Chrome.
Recreating MDN’s Truncated Textual content Impact initially revealed on CSS-Methods. It’s best to get the publication.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!