How To Add Another Line Of Text In Framer: The Complete Layout & Typography Guide

Framer Academy: How to add video, images, and text in Framer

To add another line of text in Framer, press Shift + Enter for a soft line break within the same paragraph, or press Enter to create a distinct new paragraph block. To make text wrap to a new line automatically, select the text layer and change its width constraint to Fit Content or Fill in the properties panel.

Structuring text within Framer requires a solid understanding of how canvas-based design engines render typography. Unlike basic graphics tools, Framer generates standard, semantic HTML and CSS properties under the hood. Consequently, adding a new line of text is not just a matter of hitting keys; it involves configuring text layer constraints, choosing between hard and soft carriage returns, and setting up parent container layouts so that content wraps responsively without clipping or overlapping other UI elements.

Pre-Layout Checklist and Typography Prep

Before modifying typography layouts on your canvas, you must establish the structural parameters of your text containers. This planning stage prevents layout breakage when your design scales across desktop, tablet, and mobile breakpoints.

Software Requirements: Framer desktop application or the latest version of Framer running in a supported WebGL-compatible browser.
Layer Organization: Ensure the target text layer is placed inside a clean Frame or Stack container, rather than floating as an absolutely positioned asset on the root canvas.
Prerequisite Knowledge: Understanding the functional difference between CSS block-level elements (paragraphs) and inline breaks (line breaks).
Estimated Duration: 2 to 5 minutes.
Typography Assets: Ensure your project fonts are correctly loaded (via Google Fonts, Web Fonts, or custom upload) so line heights render accurately.

Step-by-Step Typography and Layout Execution in Framer

Follow these steps to insert lines, manage wrapping behavior, and ensure your text container dynamically resizes to accommodate new lines of content.

Step 1: Insert the Text Layer and Set Base Constraints

To add and manipulate text, you must first initialize a text layer on your canvas and set its structural boundaries.

Open your Framer project and navigate to the canvas or screen viewport you want to edit.
Press the T key on your keyboard, or click the Text tool icon located in the top utility toolbar.
Click and drag on the canvas to draw a text container, or simply click once to place a default text layer.
Type your initial line of content.
With the text layer selected, navigate to the right-side properties panel. Under the Layout or Text section, locate the Width property.
Set the Width to Fixed if you want your text box to maintain a exact pixel boundary and wrap text automatically when the characters hit that boundary. Set it to Fill if your text is inside a Stack and you want the text container to dynamically span the width of its parent container.

Warning: Avoid setting your text layer width to Auto if you intend for your text to wrap into a multi-line format at a specific point. An Auto-width text box will expand horizontally on a single line forever until you manually insert a line break.

Step 2: Choose Between Hard Returns and Soft Returns

How you initiate a new line determines how the Framer engine outputs the HTML and how the spacing styles are applied to your design.

Double-click inside the text layer to enter editing mode. Place your cursor at the exact point where you want the line to break.
To create a Soft Return (Line Break): Press Shift + Enter. This actions inserts a break line within the same paragraph block. The new line will inherit the identical typography styling, and it will not have any paragraph spacing gap above it. This is ideal for short headlines or breaking up lines in a specific typographic arrangement.
To create a Hard Return (New Paragraph): Press Enter. This action splits the text into two distinct paragraphs. If you have defined a Paragraph spacing value in your text styles or property panel, Framer will apply that vertical spacing gap specifically between these two blocks of text.

Step 3: Adjust Line Height and Paragraph Spacing

Once you have added a second line of text, you must configure the vertical rhythm to prevent text lines from overlapping or looking too dense.

Select the text layer and navigate to the right-side formatting panel.
Locate the Line (Line Height) input field. This property controls the distance between your text lines.
Set this value to a proportional decimal or percentage, such as 1.4 or 140%. Using proportional line-height ratios ensures your text remains readable when font sizes scale across different viewport breakpoints. Avoid using fixed pixel heights for line height unless you have a highly rigid, non-responsive design need.
Locate the Paragraph spacing property directly below the line-height configuration. Adjust this value (e.g., to 12px or 16px) to control the visual separation between blocks of text created using the hard return method.

Pro-Tip: If your lines of text are overlapping each other on the canvas, your Line Height value is likely set below 1.0 or configured to a fixed pixel value that is smaller than your current Font Size. Set it back to 1.3 or 1.5 to restore immediate legibility.

Step 4: Configure the Parent Container for Dynamic Wrapping

If your text layer is nested inside a container (such as a Card, Button, or Page Hero), adding another line of text can cause the text to overflow its parent box if the parent is set to a fixed height.

Select the parent Frame or Stack container that houses your text layer.
In the right-side properties panel, locate the Height setting.
Change the Height property from a fixed pixel value to Fit Content (or Auto).
By setting the parent height to Fit Content, the container will dynamically expand downward whenever you add another line of text inside the text layer, pushing down any elements located below it on the page without manual adjustment.

How to Add Regional Pricing to Your Framer Site - Evendeals

Framer Text Box Constraints and Layout Parameters

The table below outlines the relationship between text box sizing, wrapping behaviors, and how Framer manages layout flow when you add more lines of text.

Sizing Property	Behavior When Adding Text	Best Use Case	Potential Drawbacks
Width: Auto	Extends horizontally on a single line. Never wraps unless manually forced.	Single-line labels, tag chips, menu items, or button labels.	Text will break out of the visible screen boundaries if it gets too long.
Width: Fixed	Wraps characters to a new line automatically when the text boundary limit is reached.	Sidebar widgets, structured column layouts, and fixed-width cards.	Can result in awkward orphan words if the screen size shrinks below the fixed width.
Width: Fill	Spans the entire width of its parent container and wraps dynamically as the parent resizes.	Hero headlines, body copy blocks, and responsive blog content.	Requires the parent container to have a clearly defined, non-infinite width.
Height: Fit	Expands vertically as you add new lines, ensuring all text remains visible.	Dynamic text blocks, responsive cards, and dynamic CMS page templates.	Cannot be used if you want to enforce a strict, uniform height across a grid of items.
Height: Fixed	Keeps a static size. Text that exceeds this height overflows the box boundary.	Rigid UI headers or fixed height layouts where text length is strictly capped.	Causes text clipping or messy overlapping with elements styled beneath it.

Common Framer Typography Failures and Canvas Fixes

Managing text engines can occasionally lead to rendering and layout bugs on your canvas. Here is how to diagnose and resolve common typography wrap failures in Framer.

Issue 1: Text Cuts Off or Disappears When Adding a New Line

Root Cause: The text layer or its parent container has a fixed height setting, combined with the layout overflow style set to hidden.
Actionable Fix: Select the parent container. In the right-side properties panel, verify if the Height is set to a fixed pixel value. Change this setting to Fit. Next, locate the Overflow property in the advanced settings and ensure it is set to Show instead of Hide. This lets the container grow naturally as new text rows populate.

Issue 2: Shift + Enter Creates an Massive Visual Gap on the Canvas

Root Cause: You have set a very high line-height ratio, or you are accidentally pressing Enter instead of Shift + Enter, which activates paragraph spacing margins instead of a clean inline break.
Actionable Fix: Clear the line break. Position your cursor again, hold down the Shift key firmly, and press Enter. If the gap remains large, check the Paragraph spacing value in the design inspector and reduce it to 0, then adjust the Line Height variable down to a standard value (such as 1.4).

Issue 3: Text Stretches Infinitely Across the Screen Without Wrapping

Root Cause: The text layer width is set to Auto, which tells Framer's layout engine to ignore structural parent constraints and keep the paragraph container on a singular, horizontal layout block.
Actionable Fix: Select your text layer. Change the Width constraint from Auto to Fill or Fixed. If the text layer is nested inside a Stack container, setting it to Fill ensures it honors the padding and boundaries of its parent frame, wrapping the text cleanly when it hits the edge.

Issue 4: Text Elements Overlap with Downstream Content in Stacks

Root Cause: The parent frame layout is not set up as an active Stack. The items are positioned absolutely relative to the canvas, causing them to remain static when the text block grows.
Actionable Fix: Select the text layer and the layers beneath it together. Right-click and select Add Stack (or use the shortcut Option + Command + G on Mac / Alt + Control + G on Windows). Ensure the Stack direction is set to Vertical. This triggers Framer's dynamic flexbox engine, causing all sibling elements inside the stack to move down safely as you add more lines of text.

Frequently Asked Questions

What is the keyboard shortcut to add a line break in Framer without creating a new paragraph?

The standard keyboard shortcut is Shift + Enter. This inserts a soft return (an inline break tag) that moves your cursor to the next line without triggering paragraph spacing margins or splitting your layout block into distinct semantic elements.

Why does my text block overflow its parent frame when I add another line?

This happens when your parent frame has its height property set to a fixed value. To fix this, select the parent frame in your layer tree and change its height setting to Fit Content. This configuration ensures the container automatically expands vertically to accommodate the growing text.

Can I style two lines of text differently within the same Framer text layer?

Yes. You can double-click your text layer to select specific words or entire lines. Once highlighted, you can apply unique colors, weights, or font styles in the properties panel. However, structural properties like line height, alignment, and paragraph spacing will still apply globally to the entire text block.

How do I make text wrap automatically to another line in a responsive design?

Select your text layer and change its width property to Fill (if it is inside a stack) or set it to a relative percentage. This allows the text container width to shrink and expand based on the user's viewport, automatically shifting words to a new line as the space narrows.

What is the difference between Enter and Shift + Enter in Framer's CMS text editor?

In the Framer CMS, pressing Enter generates a new paragraph block in the rich text parser, while pressing Shift + Enter inserts a simple line break within the current block. Utilizing the correct break method is crucial for keeping your typography spacing clean and semantic.

Optimize Your Framer Designs

Transform your static mockups into interactive, high-performance web products with clean layouts. Master the mechanics of Framer layout constraints to build flawless, fully responsive digital experiences today.