How do I limit a paragraph in Webflow to two lines followed by three dots or an ellipsis, with a line height of 16px?
TL;DR
- Set the paragraph’s line height to 16px in the Style panel and assign it a class (e.g., two-line-ellipsis).
- Add custom CSS with -webkit-line-clamp: 2 in the page's or site's Head Code or via an Embed element to enable two-line truncation with ellipsis.
To limit a paragraph to two lines with an ellipsis in Webflow and ensure a line height of 16px, you need to apply specific CSS properties using custom code.
1. Set Paragraph Style in the Designer
- Select the paragraph element in your Webflow Designer.
- In the Style panel, go to the Typography settings.
- Set the desired font size and then set line height to 16px.
- Name the class (e.g.,
two-line-ellipsis) so you can target it with custom code.
2. Add Custom Code for Line Clamping
Webflow’s Style panel does not support line clamping natively, so you will need to apply custom CSS via the Page Settings > Custom Code area or via Embed component.
Add this CSS inside a <style> tag:
<style>
.two-line-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
3. Place the Code in the Right Location
- If you are applying the style site-wide, go to Site Settings > Custom Code > Head Code, and paste the
<style>block there. - If it’s page-specific, go to Page Settings > Custom Code > Head Code.
- Alternatively, use an Embed element directly inside the page content if needed.
4. Use the Class on Your Paragraph
- Make sure the paragraph you want to limit uses the
two-line-ellipsisclass (or whatever name you assigned). - Confirm that the line height is 16px in the Style panel to match your spacing requirement.
Summary
To show only two lines with an ellipsis in Webflow, set the paragraph’s line height to 16px in the Style panel and use a custom CSS rule with -webkit-line-clamp: 2. This allows truncation with “…” while maintaining your specified line spacing.
