Allow code-input to wrap lines

There should be an easy way to do this. white-space: pre-wrap doesn't seem to work.

From a project I'm working on, no wrap neither horizontally nor vertically and growing/shrinking with size
(the horizontal wrap part is /* always wrap content */):

using code-input 2.3:

<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.3/code-input.min.js"></script>
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.3/code-input.min.css"
/>

style fixes:

code-input {
    border: 1px solid black;
    margin: 0;

    /* grow with content */
    height: min-content;
}

code-input textarea,
code-input pre {
    /* always wrap content */
    white-space: pre-wrap;
    word-break: break-all;
    max-width: min-content;

    /* override JS fixating the height with inline style and causing the textarea not to shrink
    after deleting content */
    height: min-content !important;

    /* fixes the "CSS reset" directive `* { box-sizing: border-box }` causing cursor to jump around */
    box-sizing: content-box;
}

// edit: cool plugin btw!

@ukusormus

@ukusormus Thank you very much for this! When I have time, I'll add this to the documentation.

This doesn't work for me. The cursor is in the next line, but the visible content scrolls right.

Even if it did work on Feb 9, ukusormus' solution won't work with major version 3; the equivalent functionality would be good to add as a plugin in v3.0.0

The Autocomplete plugin will need to be slightly adjusted to support this, by inserting all of the rest of the contents into the span element in the invisible pre. See here.

This should work on the latest version of code-input.js (and should keep working in all future version 2 releases); I've tested it briefly:

/* Add wrap CSS class to code-input elements with wrapped contents */

code-input.wrap textarea, code-input.wrap:not(.code-input_pre-element-styled) pre code, code-input.wrap.code-input_pre-element-styled pre {
  white-space: pre-wrap;
  width: calc(100% - var(--padding-left, 16px) - var(--padding-right, 16px))!important;
}

If you're using prism-line-numbers, let me know and I can write similar CSS to work with wrap+line-numbers code-input elements.

If you're using prism-line-numbers, let me know and I can write similar CSS to work with wrap+line-numbers code-input elements.

Similarly, if you're using the autogrow plugin, the CSS might also need a change. Let me know if you're using it.

Navigation Menu

Repository navigation

Allow code-input to wrap lines #88

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Allow code-input to wrap lines #88

Description

Activity

ukusormus commented on Aug 1, 2024

WebCoder49 commented on Aug 2, 2024

ivanperez-keera commented on Feb 9, 2025

WebCoder49 commented on Jul 18, 2025

WebCoder49 commented on Dec 10, 2025

WebCoder49 commented on Sep 16, 2026

WebCoder49 commented on Sep 16, 2026

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions