How do I limit a paragraph in Webflow to two lines followed by three dots or an ellipsis, with a line height of 16px?
- Set the paragraph’s line height to 16px and adjust font size to fit within two lines.
- Apply hidden overflow, block or flex display, and ellipsis for text overflow in the Style panel.
- Add custom CSS with
-webkit-line-clamp: 2and assign a class liketwo-line-ellipsisto apply multiline ellipsis.
To limit a paragraph to two lines with an ellipsis (three dots) at the end and a line height of 16px in Webflow, follow these steps:
1. Set Line Height and Font Size
- Select the paragraph element in the Webflow Designer.
- In the Style panel, set the Line Height to 16px.
- Adjust the Font Size so that the text fits within two lines at 16px line height (e.g., 12px or smaller depending on the font).
2. Enable Overflow Clipping
- With the paragraph still selected, scroll to the Layout section in the Style panel.
- Set Overflow to Hidden.
3. Apply Text Truncation
- In the Typography section:
- Set Display to Block or Flex (do not leave it as default).
- Set Text Overflow to Ellipsis.
- Set White Space to Normal (Webflow does not support
white-space: nowrapfor multiline truncation, so you’ll need to work with CSS).
4. Add Custom Code for Multiline Ellipsis
Since Webflow doesn't natively support multiline text truncation with ellipsis, you'll need to add custom CSS:
Go to Page Settings of the page where the paragraph appears, or to the Project Settings > Custom Code section.
Add the following CSS inside the
<style>tag:``
In Webflow Designer, give your paragraph element a class name of
two-line-ellipsisto apply this style.
Summary
To display a paragraph in Webflow truncated to two lines with an ellipsis, set a line height of 16px in the Style panel, then use custom CSS with -webkit-line-clamp: 2 to limit lines and show the ellipsis. Assign a class (like two-line-ellipsis) to the paragraph and include the CSS via Embed or Custom Code settings.