Truncate Body Text

Truncate body sized text inline with project line heights (1.5rem).

Well, the Force is what gives a Jedi his power. It's an energy field created by all living things. It surrounds us and penetrates us. It binds the galaxy together. Now, let's see if we can't figure out what you are, my little friend. And where you come from. I saw part of the message he was... I seem to have found it. General Kenobi. Years ago you served my father in the Clone Wars. Now he begs you to help him in his struggle against the Empire.

<p class="u-trunc">Well, the Force is what gives a Jedi his power. It's an energy field created by all living things. It surrounds us and penetrates us. It binds the galaxy together. Now, let's see if we can't figure out what you are, my little friend. And where you come from. I saw part of the message he was... I seem to have found it. General Kenobi. Years ago you served my father in the Clone Wars. Now he begs you to help him in his struggle against the Empire.</p>

<p class="u-trunc u-trunc-2">Well, the Force is what gives a Jedi his power. It's an energy field created by all living things. It surrounds us and penetrates us. It binds the galaxy together. Now, let's see if we can't figure out what you are, my little friend. And where you come from. I saw part of the message he was... I seem to have found it. General Kenobi. Years ago you served my father in the Clone Wars. Now he begs you to help him in his struggle against the Empire.</p>

<p class="u-trunc u-trunc-3">Well, the Force is what gives a Jedi his power. It's an energy field created by all living things. It surrounds us and penetrates us. It binds the galaxy together. Now, let's see if we can't figure out what you are, my little friend. And where you come from. I saw part of the message he was... I seem to have found it. General Kenobi. Years ago you served my father in the Clone Wars. Now he begs you to help him in his struggle against the Empire.</p>

<p class="u-trunc u-trunc-4">Well, the Force is what gives a Jedi his power. It's an energy field created by all living things. It surrounds us and penetrates us. It binds the galaxy together. Now, let's see if we can't figure out what you are, my little friend. And where you come from. I saw part of the message he was... I seem to have found it. General Kenobi. Years ago you served my father in the Clone Wars. Now he begs you to help him in his struggle against the Empire.</p>

<p class="u-trunc u-trunc-5">Well, the Force is what gives a Jedi his power. It's an energy field created by all living things. It surrounds us and penetrates us. It binds the galaxy together. Now, let's see if we can't figure out what you are, my little friend. And where you come from. I saw part of the message he was... I seem to have found it. General Kenobi. Years ago you served my father in the Clone Wars. Now he begs you to help him in his struggle against the Empire.</p>

Truncate Headings

Truncate heading sized text inline with the heading line heights.

Learn about the Force, Luke. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. You must do what you feel is right, of course.

Useful notes and reading:

Notes:

Is it worth it?

It's always worth asking whether losing that data (the truncated hidden text) is worth the cost of what that content is supposed to do before giving it a haircut.

There are a few legitimate use cases for this technique. For example, you might have a table with titles and descriptions. To preserve more space for the title, you constrain the description to one line on small viewports to the one-line and you repeat the description on the detail page for this item.

However, often we see it used on items like buttons or even form labels to make them look nicer(?) or when aligning them vertically. But once you change the viewport or resize the text, the end of the text disappears.
Eric Eggert

Truncation

Use truncation utilities to truncate text elements. It allows text to exist in the DOM and still maintain SEO benefits rather than cutting text in half using something like server side truncation.

Truncate Body Text

Truncate Headings

Learn about the Force, Luke. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. You must do what you feel is right, of course.