const carriage = (e) => { let content = document.activeElement // alert('hi') // let space = content.textContent += ' ' let space = ' ' for (let i = 0; i < 33; i++) { content.textContent += space; } }Sé que estoy muy lejos, pero ¿cómo creo márgenes izquierdo y derecho para líneas de texto individuales usando javascript de vainilla? Estoy tratando de hacer esto usando un div contenteditable.
Sin conocer el problema real, aquí hay una solución suponiendo que solo desea agregar relleno alrededor del contenido.
Las partes importantes de esta solución están en el CSS
relleno: 20px; Agrega un relleno de 20 px en la parte superior, derecha, inferior e izquierda del div box-sizing: border-box; Permite que el borde/relleno no afecte el ancho o la altura del div
.editor{ height:400px; width:400px; border:1px solid #000; padding:20px; box-sizing: border-box; } <div contenteditable="true" class="editor"></div>Agregar el white-space: pre preservará los espacios en su contenido de texto interno para su div.
Un bucle sobre cada línea (división) en el texto interno y una recombinación (unión) al final lo volverán a engrapar y cada línea tendrá el espacio de relleno a la izquierda y a la derecha.
const carriage = (e) => { let content = document.querySelector('div'); let space = ' ' let linesOfContent = content.innerText.split('\n'); content.innerText = linesOfContent.map((line) => { let newLine = line; for (let i = 0; i < 33; i++) { newLine = space + newLine + space; } return newLine }).join('\n'); } carriage(); div { white-space: pre; border: 1px solid lightgray; } <div contenteditable="true">Hello Hi Goodbye</div>