How do I limit a paragraph in Webflow to two lines followed by three dots or an ellipsis, with a line height of 16px?

To limit a paragraph to two lines with an ellipsis and a line height of 16px, use custom styles that apply multi-line text truncation.

1. Set the Typography in Webflow

• Select the paragraph element on the canvas.
• In the Style panel, set the following:
• Font Size based on your design (e.g., 14px).
• Line Height to 16px (must be explicitly set, not auto).
• Max Height to 32px (2 lines × 16px line-height).
• Overflow to Hidden.
• Text Overflow to Ellipsis.
• Display to -webkit-box (custom code needed, see next step).
• Webkit Line Clamp to 2 (also custom code).
• Box Orientation to vertical (custom code only).

2. Add Custom Code for Multi-Line Ellipsis

Webflow UI doesn't support full multi-line ellipsis, so add custom CSS in the Page Settings → Custom Code > Before :

• Paste this custom rule, targeting the paragraph via a class, e.g., limit-text:

  ```css

  ```

3. Assign the Class to Your Paragraph

• Select your paragraph, and add the class name limit-text (or whatever you used in the CSS).
• Make sure no other styles conflict with display or height.

Summary

To create a two-line text with an ellipsis and line height of 16px, define the line height and max-height in Webflow, then use custom CSS with -webkit-line-clamp: 2 behavior for truncation. Assign this style to your paragraph via a class for consistent control.