Как добавить пространство в номера строки в Textarea Word wrap in svelte ⇐ CSS

[Anonymous]

У меня есть текстовая область с CSS -генерируемыми номерами строк для каждой новой строки. Если я получаю обертку слова, оно не обертывает новый текст строки. Я хотел бы сделать свои номера строк с текстом. />
Как я могу автоматически обнаружить и добавить обертку слова и номера моих строк? Вот мой код: < /p>

Код: Выделить всё

export let source = `jon
sup
me
fixin to do sumthin good`;

let numberOfLines = source.split('\n').length;

const KeyUp = (event: Event) => {
const textarea = event.target as HTMLInputElement;
numberOfLines = textarea.value.split('\n').length;
};

const KeyDown = (event: Event) => {
const textarea = event.target as HTMLInputElement;

if ((event as KeyboardEvent).key === 'Tab') {
const start = textarea.selectionStart;
const end = textarea.selectionEnd;

if (start && end) {
textarea.value = textarea.value.substring(0, start) + '\t'
+ textarea.value.substring(end);
event.preventDefault();
}
}
};





{#each Array(numberOfLines) as _}

{/each}






.editor {
display: inline-flex;
gap: 10px;
font-family: monospace;
line-height: 21px;
background: #282a3a;
border-radius: 2px;
padding: 20px 10px;
}

.line-numbers {
width: 20px;
text-align: right;
}

.line-numbers .new-line {
counter-increment: linenumber;
}

.line-numbers .new-line::before {
content: counter(linenumber);
display: block;
color: #506882 !important;
}

.text-content {
line-height: 21px;
overflow-y: hidden;
padding: 0;
border: 0;
background: #282a3a;
color: #fff;
min-width: 500px;
outline: none;
resize: none;
}

А и вот ссылка на стеклейбитц:

(правый клик - pre in vinode)
(ry rout in new windo)
(right click - new in vino. /> спасибо! < /p>
j < /p>

изображение для ответа на комментарий ниже: < /p>
< /p>

Подробнее здесь: https://stackoverflow.com/questions/749 ... -in-svelte