code-input icon indicating copy to clipboard operation
code-input copied to clipboard

Allow code-input to wrap lines

Open WebCoder49 opened this issue 1 year ago • 4 comments

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

WebCoder49 avatar Mar 28 '24 17:03 WebCoder49

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/[email protected]/code-input.min.js"></script>
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/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 avatar Aug 01 '24 18:08 ukusormus

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

WebCoder49 avatar Aug 02 '24 13:08 WebCoder49