Para distinguir uma quebra automática de uma nova linha armazenada, desative a quebra automática de linha em um editor de texto e examine o texto original. Este guia para Mac explica como fazer essa verificação, como os layouts do navegador podem induzir ao erro e o que o código copiado realmente pode comprovar.

Qual é a diferença entre uma quebra automática e uma nova linha?

Uma quebra automática ocorre quando um navegador ou editor move o texto para outra linha exibida para ajustá-lo à largura disponível. Uma nova linha armazenada faz parte do próprio texto. O W3C distingue as quebras de linha automáticas das quebras forçadas, que podem resultar de caracteres de nova linha preservados ou de limites entre blocos. O processamento de espaços em branco do CSS altera a apresentação sem modificar os dados subjacentes do documento. CSS Text Module Level 3

Essa distinção cria três possibilidades quando o código aparece em várias linhas: uma linha lógica foi quebrada automaticamente; o texto contém linhas lógicas separadas; ou a estrutura da página força uma quebra visual. Uma captura de tela, por si só, não permite identificar com segurança qual dessas opções se aplica.

Aqui, “nova linha inserida” significa uma nova linha presente na fonte examinada. Sua presença não revela quem a inseriu: ela pode ter sido produzida por um formatador, um processo de exportação ou outra transformação. A tarefa prática é determinar se um limite pertence ao texto ou apenas à apresentação atual.

Como verificar código em um editor para desktop no Mac?

Use o Visual Studio Code neste fluxo de trabalho. Comece pelo arquivo de código original, se estiver disponível. Se você tiver apenas uma página pública, copie o código relevante para um documento separado no editor, mas considere esse documento uma evidência do texto copiado até poder compará-lo com um original.

Desative a quebra automática sem reformatar o texto

  1. Abra o arquivo ou o trecho copiado no VS Code.
  2. Com o editor em foco, pressione Option+Z para executar Toggle Word Wrap.
  3. Observe se a continuação aparente se junta à linha exibida anterior e se estende horizontalmente.
  4. Se a quebra automática já estiver desativada, alterne-a mais uma vez para comparar os dois estados. O resultado importante é a diferença entre as duas visualizações.

A Microsoft documenta Option+Z como o atalho padrão do macOS para Toggle Word Wrap, com o ID de comando editor.action.toggleWordWrap. Se seus atalhos forem diferentes, procure esse comando no editor Keyboard Shortcuts. Referência de atalhos de teclado padrão

Com editor.wordWrap definido como on, o VS Code quebra o texto de acordo com a largura da área de visualização do editor. Portanto, desativar a quebra automática remove essas continuações visuais. Um limite que permanece no mesmo texto inalterado é um limite de linha lógica, não uma quebra automática desse editor. Edição básica

Use esta tabela de decisão ao comparar as visualizações:

Observação O que ela indica Próxima ação
Uma continuação se junta à linha exibida anterior quando a quebra automática está desativada Era uma quebra automática no editor Mantenha o texto inalterado
Duas linhas continuam separadas com a quebra automática desativada O texto examinado contém um limite de linha Compare com o original se você examinou uma cópia
Um limite da página desaparece no texto copiado A página e a representação copiada são diferentes Examine o texto e a estrutura da página
Um limite permanece na cópia, mas não há original disponível O texto copiado contém esse limite Não determine sua origem

Experimente um exemplo sintético

Cole o exemplo de linha única a seguir em um documento separado. É um trecho ilustrativo de JavaScript; não é necessário executá-lo.

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

Reduza a largura do editor até que o texto quebre automaticamente. Com a quebra automática ativada, a instrução pode ocupar várias linhas exibidas. Desative a quebra automática: a instrução deve voltar a uma única linha lógica, mesmo que você precise rolar horizontalmente para ler o final.

Agora compare com esta versão deliberadamente dividida em várias linhas:

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

Essas quatro linhas lógicas continuam separadas quando a quebra automática está desativada. Em uma largura reduzida, qualquer uma delas também pode quebrar automaticamente. Esta é a distinção útil: novas linhas armazenadas e quebras automáticas podem coexistir no mesmo trecho de código.

Evite formatar o documento durante a comparação. O objetivo é alterar a visualização mantendo constante o texto examinado. Caso contrário, uma mudança no limite de linha pode refletir uma edição, e não uma configuração de exibição.

Por que redimensionar o navegador é apenas um teste preliminar?

Imagine uma página pública abstrata com uma coluna de navegação e um painel de código. Aumentar a largura do navegador pode dar mais espaço ao painel. Se um limite passar a aparecer em outra palavra, isso indica que pode ser uma quebra automática. No entanto, se o painel tiver largura fixa, redimensionar a janela externa pode não alterá-lo.

Portanto, um limite que permanece no mesmo lugar não permite tirar conclusões. O navegador pode estar preservando uma nova linha, encontrando uma quebra estrutural ou quebrando o texto dentro de um painel cuja largura útil não mudou. Confirme o resultado com a representação do texto em vez de tratar o redimensionamento da janela como prova.

O CSS também determina se as novas linhas armazenadas ficam visíveis. A MDN documenta estes valores comuns: propriedade CSS white-space

Valor CSS Tratamento das novas linhas na fonte Quebra automática
normal Colapsadas com outros espaços em branco Permitida
pre Preservadas Desativada
pre-wrap Preservadas Permitida
pre-line Preservadas; espaços e tabulações são colapsados Permitida

Consequentemente, pre-wrap pode exibir os dois tipos de limite ao mesmo tempo, enquanto normal pode ocultar novas linhas da fonte. Desativar a quebra automática com nowrap não basta para testar a preservação da fonte, pois isso também colapsa os espaços em branco. Para um bloco de texto simples que você controla, pre é a comparação relevante quando você precisa preservar os espaços em branco sem quebra automática. propriedade CSS white-space

O texto copiado revela as novas linhas originais?

O texto copiado é útil, mas constitui uma representação separada. A MDN descreve innerText como o texto renderizado que aproxima o resultado da seleção e cópia de um elemento. Ele responde à aparência renderizada, incluindo quebras explícitas, como elementos br. Portanto, uma nova linha em um trecho colado não prova, por si só, que a cadeia de código original continha uma nova linha. HTMLElement: propriedade innerText

Para um contêiner de código estático simples, textContent responde a outra pergunta: ele retorna o texto do nó e de seus descendentes, concatenando o texto dos descendentes sem usar a aparência renderizada. Isso o torna útil para examinar o texto do DOM, desde que o contêiner realmente contenha o código desejado. Node: propriedade textContent

Essas propriedades não são ferramentas de recuperação intercambiáveis. Uma quebra estrutural não precisa corresponder a uma nova linha em textContent; por outro lado, pode haver espaços em branco na fonte sem que apareçam como uma quebra renderizada. Quando o texto e o layout da página divergem, descreva o resultado com precisão: “o texto do DOM contém uma nova linha”, “o layout força uma quebra” ou “a versão copiada contém uma nova linha”. Evite afirmar mais do que a representação examinada permite concluir.

O que muda em um editor de código no navegador?

Um editor no navegador pode manter seu documento separado dos elementos exibidos. Por exemplo, a documentação oficial do código-fonte do CodeMirror descreve as linhas do documento por meio do modelo Text: lines conta as linhas lógicas, e line(n) recupera uma linha numerada. A posição to de uma linha fica antes da quebra de linha seguinte ou no final do documento. Documentação da API de texto de documentos do CodeMirror

O CodeMirror também documenta que sua visualização desenha no DOM apenas o código visível e uma margem ao redor. Sua propriedade lineWrapping descreve a quebra de linhas na visualização. Por isso, contar as linhas renderizadas ou extrair o DOM visível do editor não basta para determinar as linhas do documento completo. Documentação da API de visualização do editor CodeMirror

Para uma verificação comum em um computador, use o comando de download, exportação ou cópia documentado pelo aplicativo anfitrião, se estiver disponível, e examine o resultado com a quebra automática desativada. Se você mantém uma integração do CodeMirror, use o modelo do documento para determinar as linhas lógicas. Uma API de biblioteca não prova que todos os aplicativos ofereçam um controle equivalente para o usuário.

Um formulário pode acrescentar novas linhas que nunca foram digitadas?

Sim. O padrão HTML do WHATWG distingue o valor atual da API de uma área de texto de sua representação no envio. Com wrap="soft", o texto pode quebrar visualmente sem que sejam acrescentadas quebras de linha na representação enviada. Com wrap="hard", a representação enviada pode ganhar quebras de linha; para isso, é preciso especificar cols. A API normaliza os finais de linha para LF. Padrão HTML: o elemento textarea

Isso importa ao comparar o texto antes e depois de um fluxo de trabalho baseado em formulário. Um limite que aparece apenas no resultado enviado ou exportado pode ter sido introduzido nessa etapa do processamento. Examine a representação pertinente à sua tarefa: o texto atual do editor ao identificar limites digitados ou o arquivo resultante ao determinar o que foi realmente exportado.

Como preservar os limites do navegador e da composição do texto?

Deixe a quebra visual a cargo do navegador ou do editor. O W3C especifica que overflow-wrap: anywhere mantém juntos os agrupamentos de grafemas e preserva a composição do texto nas quebras introduzidas. Reconstruir as linhas inserindo novas linhas após um número fixo de caracteres não reproduz essas regras de layout. CSS Text Module Level 3

Para reutilizar um trecho de código, primeiro obtenha a melhor fonte disponível, compare a quebra automática ativada e desativada e preserve os limites de linha armazenados, a menos que pretenda editá-lo. Se só houver uma página renderizada, registre o que puder comprovar sobre essa representação e deixe sem resolução os limites incertos. Assim, você terá uma verificação repetível sem transformar um ajuste de exibição em uma alteração acidental do texto.

Fontes