Why does my Construct 3 Text object not wrap?

The Text object wraps based on its current width. If you change text content but never resize the object, the text uses the design-time width, which may be much larger than what fits on a mobile screen. Use Set width action to constrain wrapping based on screen size.

What is the difference between word wrap and character wrap in Construct 3?

Word wrap breaks lines at spaces, keeping words intact. Character wrap breaks anywhere, even mid-word. Word wrap is correct for most languages; character wrap is needed for languages without spaces (Chinese, Japanese) or when the box is so narrow no single word fits.

Why does my SpriteFont overflow on mobile but wrap fine on desktop?

Layer Scale and viewport differences mean the Text appears narrower on a phone than on a 1080p desktop. Use Set width based on a percentage of ViewportRight - ViewportLeft, then call Set text again so the engine recalculates the wrap with the new width.

Fix: Construct 3 Text Object Not Wrapping Correctly

Quick answer: Construct 3 Text objects wrap based on their current width. If the width is too large (or the screen is smaller than expected), text overflows or reads as a single long line. Use the Set width action with a viewport-based value, then re-call Set text so the wrap recomputes.

Here is how to fix Construct 3 Text and SpriteFont objects that refuse to wrap, overflow off-screen on mobile, or compress all text into a single oversized line. The wrap behavior depends on the object’s current width, and that width is set at design time based on your editor viewport — which is rarely what the player sees.

The Symptom

Your dialogue box uses a Text object that looks fine in the layout editor. On a 1080p browser it still looks fine. On a phone in portrait mode, the text either runs off the right side of the screen or compresses into one massive overflowing line.

What Causes This

Width is fixed at design time. A Text object has a Width property set when you place it. Wrapping uses that value verbatim. If the design width is 800 px but the player’s viewport is 360 px wide, the wrap point is off-screen.

Wrap mode incorrect. Construct 3 supports two wrap modes: Word and Character. Word wrap fails for languages without spaces. Character wrap looks ugly for English but is necessary for CJK content.

Set text before Set width. Construct 3 caches the wrapped layout when text is set. If you Set text first and then Set width, the cached layout uses the old width. You must Set width before Set text, or call Set text again afterward to re-wrap.

Layer scale changes the apparent width. A Text on a layer with Scale 0.5 visually shrinks but the wrap calculation uses the unscaled width. The visible result is a narrow box of unwrapped text.

The Fix

Step 1: Resize text on layout start.

Event: System -> On start of layout
  Action: DialogueText -> Set width to ViewportRight(0) - ViewportLeft(0) - 40
  Action: DialogueText -> Set position to (ViewportLeft(0) + 20, ViewportBottom(0) - 200)

This anchors the text to the visible viewport with 20 px padding on each side, regardless of device.

Step 2: Re-wrap whenever the text or window changes. Subscribe to the Browser On resized event and re-apply width plus text:

Event: Browser -> On resized
  Action: DialogueText -> Set width to ViewportRight(0) - ViewportLeft(0) - 40
  Action: DialogueText -> Set text to DialogueText.Text   // triggers re-wrap

Step 3: Confirm Word Wrap is enabled. Select the Text object in the editor, expand Properties → Word wrap, and ensure it is set to Word for European languages or Character for CJK content.

Step 4: Use a fixed maximum height with vertical anchoring. If your dialogue may exceed the box, set Height in tandem with Width and add a scrollbar or page-turn UI rather than letting text spill below the viewport.

Step 5: Test SpriteFont character spacing. SpriteFont uses fixed-width or per-character widths defined in the object. If a SpriteFont’s Character Width is wrong (e.g., set to 16 for an 8-pixel font), wrapping calculates against the wrong width and lines either wrap too early or never wrap at all. Open the SpriteFont and verify Character Width matches the actual glyph width in your sheet.

Anchoring For Responsive UI

The Anchor behavior is your friend for responsive layouts. Add Anchor to the Text and pin Left/Right edges to the viewport edges:

Anchor settings on DialogueText:
  Left   = Window left
  Right  = Window right
  Top    = (none)
  Bottom = Window bottom

Anchor automatically resizes the object as the viewport changes, eliminating the need for an On resized handler in many cases. Combined with re-applying Set text after each resize, this gives reliable wrapping on every device.

“Wrap follows width. Width must follow viewport. Anchor + re-apply text on resize, and the box stops overflowing.”

Related Issues

For other Construct 3 mobile rendering issues, see SpriteFont Blurry on Mobile and Sprite Flickering on Mobile.

Anchor for resize. Set width then text. Word wrap on. The dialogue fits.