Monaco editor word wrap: fit long source lines without inserting newlines

A generated HTML report can contain an entire instruction paragraph on one source line. In a side-by-side review, horizontal scrolling makes the final words difficult to compare with the preview. Soft wrapping lets the developer read that line in the available pane while preserving the source's line boundaries.

Pick the wrapping rule you need

For an initialized standalone editor:

editor.updateOptions({
  wordWrap: 'bounded',
  wordWrapColumn: 100,
  wrappingIndent: 'same'
});

The four wordWrap values have different limits:

The column is an editor text-column setting, not a CSS pixel width. A fixed-column rule alone can still exceed a narrow viewport. bounded combines the preferred column with available space. wrappingIndent: 'same' controls continuation indentation in the view; it does not replace the whitespace stored at the start of the source line.

Keep a view toggle separate from formatting

For a simple “Wrap source” control:

function setSourceWrap(enabled) {
  editor.updateOptions({
    wordWrap: enabled ? 'on' : 'off'
  });
}

This toggle deliberately chooses viewport wrapping when enabled. If the interface promises a bounded 100-column policy, use 'bounded' consistently instead of silently changing the rule in the handler.

Changing editor options is different from formatting and saving the document. A formatter may change whitespace and stored line breaks. A wrap control should not call that formatter or recreate the model just to change what fits in the pane.

Likewise, CSS wrapping on a rendered HTML paragraph controls the webpage's layout. It cannot configure Monaco's measured source view. Apply Monaco's public options to the editor instance rather than forcing white-space rules onto its internal line elements.

Check the source before and after resizing

Use a development document containing one long instruction line and a second short line. Capture editor.getModel().getValue() and its line count. Turn wrapping on, then narrow the editor's container until the long line occupies several displayed rows. Confirm that the model value and its line count remain unchanged.

If a surrounding split pane resizes but the source view keeps its old width, inspect editor layout and container dimensions. The Monaco setup guide uses automaticLayout: true; an application managing layout itself must call its appropriate layout path after changing usable space.

Check selection and copying across a visual wrap. Copied source should retain the stored newline boundaries, not acquire a newline at every displayed row. Then turn wrapping off and confirm the same source can be inspected horizontally. Save only when the author has made an intended content change, and compare the saved value with the text model rather than counting rows on the screen.