Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow code-input to wrap lines #88

Open
WebCoder49 opened this issue Mar 28, 2024 · 2 comments
Open

Allow code-input to wrap lines #88

WebCoder49 opened this issue Mar 28, 2024 · 2 comments

Comments

@WebCoder49
Copy link
Owner

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

@WebCoder49 WebCoder49 assigned WebCoder49 and unassigned WebCoder49 May 27, 2024
@ukusormus
Copy link

ukusormus commented Aug 1, 2024

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!

@WebCoder49
Copy link
Owner Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants