Recreating MDN’s Truncated Textual content Impact | CSS-Tips

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 are 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 method:

• It’s an instance of deliberately reducing off content material. We’ve referred to that as CSS information loss elsewhere. And whereas information loss is usually a nasty factor, I like the way it’s getting used right here since excerpts are supposed to be a teaser for the total content material.
• That is completely different than truncating textual content with text-overflow: ellipsis, a subject that got here up moderately lately when Eric Eggert shared his considerations with it. The primary argument towards it’s that there isn’t a technique to get better the textual content that will get reduce off within the truncation — assistive tech will announce it, however sighted customers haven’t any technique to get better it. MDNs method supplies a bit extra management in that division for the reason that 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 will drop in a number of baseline kinds to shore issues up.

Once more, nothing too fancy. Our purpose is reduce the content material off after, say, the third line. We will 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 would like is de facto primarily based on scale like this. I seen MDN makes use of an analogous --base-line-height variable, most likely for a similar objective.

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 coloration worth that’s used on the .card itself. That means, the textual content seems to fade into the background. And I discovered that I wanted to tweak the second coloration cease within the gradient as a result of the textual content isn’t utterly hidden when the gradient blends all the way in which to 100%. I discovered 80% to be a candy spot for my eyes.

And, sure, :after wants a top and width. The top is the place that --base variables comes again into play as a result of we would like that scaled to the paragraph’s line-height as a way to cowl the textual content with the peak of :after.

.card p:after {
  /* identical as earlier than */
  top: calc(1rem * var(--base) + 1px);
  width: 100%; /* relative to the .card container */
}

Including one further pixel of top 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 prime (or inset-block-start) to offset the gradient in that path both. 🤷‍♂️

Now that p:after is totally positioned, we have to explicitly declare relative positioning on the paragraph to maintain :after in its circulation. In any other case, :after could be utterly yanked from the doc circulation and wind up exterior of the cardboard. This turns into the total 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 performed, proper? Nope! The dang gradient simply doesn’t appear to be in the suitable 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;
  top: calc(1rem * var(--base) + 1px);
  inset-block-end: 0;
  place: absolute;
  width: 100%;
}

All collectively now!

And, yep, seems seems like VoiceOver respects the total textual content. I haven’t examined every other display readers although.

I additionally seen that MDN’s implementation removes pointer-events from p:after. In all probability a superb defensive tactic to forestall odd behaviors when deciding on textual content. I added it in and deciding on textual content does really feel somewhat smoother, at the least in Safari, Firefox, and Chrome.