Para distinguir un ajuste visual de un salto de línea almacenado, desactiva el ajuste de línea en un editor de texto e inspecciona el texto original. Esta guía para Mac explica cómo hacer esa comprobación, cómo los diseños del navegador pueden inducir a error y qué puede demostrar realmente el código copiado.

¿Cuál es la diferencia entre un ajuste visual y un salto de línea?

Un ajuste visual ocurre cuando un navegador o editor desplaza el texto a otra fila de la pantalla para que quepa en el ancho disponible. Un salto de línea almacenado forma parte del texto mismo. El W3C distingue los saltos de ajuste visual de los saltos forzados, que pueden deberse a caracteres de nueva línea conservados o a límites entre bloques. El procesamiento de espacios en blanco de CSS cambia la presentación sin modificar los datos subyacentes del documento. Módulo de texto CSS, nivel 3

Esa distinción da lugar a tres posibilidades cuando el código aparece en varias filas: una línea lógica se ha ajustado visualmente; el texto contiene varias líneas lógicas; o la estructura de la página fuerza un salto visual. Una captura de pantalla por sí sola no permite determinar de forma fiable cuál de estas opciones se aplica.

Aquí, «salto de línea escrito» significa que hay un salto de línea en el código fuente examinado. Su presencia no permite saber quién lo insertó: podría haberlo generado un formateador, un proceso de exportación u otra transformación. La tarea práctica consiste en determinar si el límite pertenece al texto o solo a su presentación actual.

¿Cómo puedes comprobar el código en un editor de escritorio para Mac?

Usa Visual Studio Code para este flujo de trabajo. Si está disponible, empieza con el archivo de código original. Si solo tienes una página pública, copia el código pertinente en un documento aparte del editor, pero considera ese documento como evidencia del texto copiado hasta que puedas compararlo con un original.

Desactiva el ajuste de línea sin reformatear el texto

  1. Abre el archivo o la muestra copiada en VS Code.
  2. Con el editor en primer plano, pulsa Option+Z para ejecutar Toggle Word Wrap.
  3. Observa si la continuación aparente se une a la fila anterior y se extiende horizontalmente.
  4. Si el ajuste ya estaba desactivado, vuelve a alternarlo para comparar ambos estados. Lo importante es la diferencia entre las dos vistas.

Microsoft indica que Option+Z es el atajo predeterminado de macOS para Toggle Word Wrap, con el identificador de comando editor.action.toggleWordWrap. Si tus atajos son distintos, busca ese comando en el editor Keyboard Shortcuts. Referencia de atajos de teclado predeterminados

Con editor.wordWrap establecido en on, VS Code ajusta el texto al ancho de la ventana gráfica del editor. Por lo tanto, desactivar el ajuste elimina esas continuaciones visuales. Un límite que se mantiene en el mismo texto sin cambios es un límite entre líneas lógicas, no un ajuste visual de ese editor. Edición básica

Usa esta tabla de decisiones al comparar las vistas:

Observación Qué indica Siguiente paso
Una continuación se une a la fila anterior cuando el ajuste está desactivado Era un ajuste visual en el editor Deja el texto sin cambios
Dos líneas siguen separadas con el ajuste desactivado El texto examinado contiene un límite de línea Si examinaste una copia, compárala con el original
Un límite de la página desaparece en el texto copiado La página y la representación copiada son distintas Examina el texto y la estructura de la página
Un límite copiado se mantiene, pero no hay un original disponible El texto copiado contiene ese límite Deja su origen sin determinar

Prueba con un ejemplo sintético

Pega la siguiente muestra de una sola línea en un documento aparte. Es un texto ilustrativo en JavaScript; no hace falta ejecutarlo.

const labels = ["Amber", "Birch", "Cedar", "Dune", "Elm", "Fern", "Grove", "Harbor"];

Haz que el editor sea lo bastante estrecho para que el texto se ajuste. Con el ajuste activado, la instrucción puede ocupar varias filas de la pantalla. Desactiva el ajuste: la instrucción debería volver a ocupar una sola línea lógica, aunque tengas que desplazarte horizontalmente para leer el final.

Ahora compárala con esta versión deliberadamente dividida en varias líneas:

const labels = [
  "Amber", "Birch", "Cedar", "Dune",
  "Elm", "Fern", "Grove", "Harbor"
];

Estas cuatro líneas lógicas siguen separadas cuando el ajuste está desactivado. Con un ancho reducido, cualquiera de ellas también puede ajustarse visualmente. Esta es la distinción útil: los saltos de línea almacenados y los ajustes visuales pueden coexistir en la misma muestra de código.

Evita dar formato al documento durante la comparación. El objetivo es cambiar la vista y mantener constante el texto examinado. De lo contrario, un límite de línea que haya cambiado podría deberse a una edición y no a un ajuste de visualización.

¿Por qué cambiar el tamaño de la ventana del navegador es solo una prueba preliminar?

Imagina una página pública abstracta con una columna de navegación y un panel de código. Al ampliar la ventana del navegador, el panel puede ganar espacio. Si un límite se desplaza a otra palabra, eso respalda la explicación del ajuste visual. Sin embargo, si el panel tiene un ancho fijo, cambiar el tamaño de la ventana exterior puede dejarlo igual.

Por lo tanto, que un límite se mantenga en el mismo sitio no permite sacar conclusiones. El navegador puede estar conservando un salto de línea, encontrarse con un salto estructural o ajustar el texto dentro de un panel cuyo ancho útil no ha cambiado. Confirma el resultado con la representación del texto en vez de tratar el cambio de tamaño de la ventana como una prueba.

CSS también determina si los saltos de línea almacenados son visibles. MDN documenta estos valores comunes: propiedad CSS white-space

Valor CSS Tratamiento de los saltos de línea del código fuente Ajuste automático
normal Se contraen junto con otros espacios en blanco Permitido
pre Se conservan Desactivado
pre-wrap Se conservan Permitido
pre-line Se conservan; los espacios y las tabulaciones se contraen Permitido

En consecuencia, pre-wrap puede mostrar ambos tipos de límites a la vez, mientras que normal puede ocultar los saltos de línea del código fuente. Desactivar el ajuste con nowrap no basta para comprobar que se conserva el código fuente, porque también contrae los espacios en blanco. En un bloque de texto sencillo que controles, pre es la opción pertinente para comparar cuando necesites conservar los espacios en blanco sin ajuste automático. Propiedad CSS white-space

¿Puede el texto copiado revelar los saltos de línea originales?

El texto copiado es útil, pero constituye una representación aparte. MDN describe innerText como el texto representado que aproxima lo que se obtendría al seleccionar y copiar un elemento. Responde a la apariencia representada, incluidos los saltos explícitos como los elementos br. Por lo tanto, que aparezca un salto de línea en una muestra pegada no demuestra por sí solo que la cadena de código original lo contuviera. HTMLElement: propiedad innerText

Para un contenedor de código estático sencillo, textContent responde a otra pregunta: devuelve el texto del nodo y sus descendientes, concatenando el texto de los descendientes sin basarse en la apariencia representada. Esto permite examinar el texto del DOM, siempre que el contenedor contenga realmente el código que buscas. Node: propiedad textContent

Estas propiedades no son herramientas de recuperación intercambiables. Un salto estructural no tiene por qué ser un salto de línea en textContent; a la inversa, puede haber espacios en blanco en el código fuente sin que aparezcan como un salto representado. Cuando el texto y el diseño de la página discrepen, describe el resultado con precisión: «el texto del DOM contiene un salto de línea», «el diseño fuerza un salto» o «la versión copiada contiene un salto de línea». Evita afirmar más de lo que demuestra la representación examinada.

¿Qué cambia en un editor de código basado en navegador?

Un editor de navegador puede mantener el documento separado de los elementos que muestra. Por ejemplo, la documentación oficial del código fuente de CodeMirror describe las líneas del documento mediante su modelo Text: lines cuenta las líneas lógicas y line(n) recupera una línea numerada. La posición to de una línea se encuentra antes del salto de línea siguiente o al final del documento. Documentación de la API de texto de documentos de CodeMirror

CodeMirror también documenta que su vista dibuja en el DOM solo el código visible y un margen circundante. Su propiedad lineWrapping describe el ajuste de línea en la vista. Por estos límites, contar las filas representadas o extraer el DOM visible del editor no basta para determinar las líneas del documento completo. Documentación de la API de vista del editor de CodeMirror

Para una comprobación habitual en un ordenador de escritorio, usa el comando documentado de descarga, exportación o copia de la aplicación anfitriona, si está disponible, y luego examina ese resultado con el ajuste desactivado. Si mantienes una integración de CodeMirror, usa su modelo de documento para determinar las líneas lógicas. Una API de biblioteca no demuestra que todas las aplicaciones ofrezcan un control equivalente al usuario.

¿Puede un formulario añadir saltos de línea que nadie haya escrito?

Sí. El estándar HTML de WHATWG distingue entre el valor actual de la API de un área de texto y la representación que se envía al enviar el formulario. Con wrap="soft", el texto puede ajustarse visualmente sin que se añadan ajustes en el envío. Con wrap="hard", la representación enviada puede ganar saltos de línea; ese estado requiere que se especifique cols. La API normaliza los finales de línea a LF. Estándar HTML: el elemento textarea

Esto importa al comparar el texto antes y después de un flujo de trabajo basado en formularios. Un límite que aparezca solo en un resultado enviado o exportado puede deberse a esa etapa del procesamiento. Inspecciona la representación pertinente para tu tarea: el texto actual del editor cuando quieras identificar límites escritos, o el archivo resultante cuando quieras determinar qué se exportó realmente.

¿Cómo se conservan los límites del navegador y del modelado de texto?

Deja que el navegador o el editor se encargue del ajuste visual. El W3C especifica que overflow-wrap: anywhere mantiene unidos los grupos de grafemas y conserva el modelado de texto a través del ajuste introducido. Reconstruir las líneas insertando saltos de línea cada cierto número de caracteres no reproduce esas reglas de diseño. Módulo de texto CSS, nivel 3

Si necesitas reutilizar una muestra de código, primero consigue la mejor fuente disponible, compara las vistas con el ajuste activado y desactivado y conserva los límites de línea almacenados, salvo que quieras editar el texto. Si solo dispones de una página representada, registra lo que puedas determinar sobre esa representación y deja sin resolver los límites inciertos. Así tendrás una comprobación repetible sin convertir un cambio de visualización en una modificación accidental del texto.

Fuentes