05.03.2025

Desabilitando Quebra de Linha e Adicionando Rolagem em Textarea

Resposta Rápida

Para desabilitar a quebra de linha em um textarea, use a propriedade CSS white-space: nowrap;. Quando o texto ultrapassa a largura do textarea, ele começará a rolar horizontalmente:

<textarea style="white-space: nowrap; overflow-x: auto;"></textarea>

A rolagem horizontal automática é ativada pela propriedade overflow-x: auto; quando a quantidade de texto ultrapassa as dimensões definidas.

Solução de Problemas com Herança e Casos Especiais

Em algumas situações, soluções básicas podem se mostrar inadequadas, necessitando de configurações mais específicas.

Superando Estilos de Elementos Pais

Evite a quebra de linha indesejada causada por estilos aplicados por elementos pai. Isso pode ser alcançado com a seguinte regra:

textarea {
  overflow-wrap: normal;
}

Preservando Espaços em Blocos de Código

Para garantir a exibição correta de blocos de código ou textos com indentação importante, use:

textarea {
  white-space: pre;
}

Usando o Atributo 'wrap'

O atributo wrap="soft" instrui o navegador a não inserir quebras de linha rígidas quando o formulário é enviado:

<textarea wrap="soft"></textarea>

Eliminando Rolagem Vertical

Se a rolagem vertical não for necessária, aplique o seguinte CSS:

textarea {
  overflow-y: hidden;
}

Garantindo Compatibilidade entre Navegadores

A maneira como diferentes navegadores lidam com certos recursos exige soluções adequadas para garantir uma operação estável.

Configurando Barras de Rolagem Horizontais no Firefox

Para controlar a rolagem horizontal no Firefox, use:

textarea {
  overflow: auto;
  scrollbar-width: auto; /* Específico para o Firefox */
}

Características do Internet Explorer 11

No IE 11, o parâmetro wrap="off" é utilizado para evitar a quebra de linha. Certifique-se de que isso não conflite com as configurações de modo de compatibilidade.

Compatibilidade com XHTML 1.1 Strict

Caso a conformidade com XHTML 1.1 Strict seja essencial, simplifique o atributo wrap usando JavaScript:

document.querySelector('textarea').setAttribute('wrap', 'off');

Visualização

Imagine o texto como uma jornada reta sem paradas:

Antes:  [🚂🌍🚂🌍🚂]
Depois: [🚂🌍🌍🌍🚂]

Definindo propriedades CSS fará com que seu texto se mova em linha reta e role conforme necessário:

textarea {
  white-space: nowrap;  /* O texto se move exclusivamente para a frente! */
  overflow-x: scroll;   /* O texto rola quando transborda */
}

Assim, textos longos "deslizarão" em uma única direção.

Acompanhando Informações Desatualizadas

Sempre verifique a confiabilidade das informações, pois algumas fontes, incluindo versões de documentação desatualizadas, podem conter imprecisões.

Testando em Diferentes Plataformas

Teste o comportamento da sua solução em diferentes navegadores para garantir que funcione corretamente em qualquer "trem" – seja no Chrome ou no Firefox.

Recursos Úteis

1. Propriedade CSS word-wrap - W3Schools — Um guia abrangente para gerenciar a quebra de texto em CSS.
2. white-space - CSS: Cascading Style Sheets | MDN — Explicação do MDN sobre como gerenciar espaços em CSS.
3. Tag HTML textarea - W3Schools — Instruções e exemplos para usar o elemento <textarea> em HTML.
4. overflow | CSS-Tricks — Um guia para o uso da propriedade CSS overflow.
5. Perguntas Recentes sobre 'textarea+word-wrap' - Stack Overflow — Discussões e soluções sobre o tema da quebra de linha em textarea.
6. Gerenciando Palavras Longas e URLs (quebras forçadas, quebra de linha, reticências, etc.) | CSS-Tricks — Recomendações para gerenciar textos longos para que não transbordem os limites dos contêineres.

Video

Navigation