Como desativar a quebra de linha em HTML?

517

Sinto-me tolo por não conseguir descobrir isso, mas como desativo o quebra-cabeças? o css word-wrappropriedade pode ser forçado a com break-word, mas não pode ser forçado fora (só pode ser deixado sozinho com normalvalor).

Como forço a quebra de linha ?

html css word-wrap

— Alexander Bird
fonte

852

Você precisa usar o white-spaceatributo CSS .

Em particular, white-space: nowrape white-space: presão os valores mais usados. O primeiro parece ser o que você procura.

— Jon
fonte

25

Adicionados valores específicos do kit da web ausentes acima

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */

— Matas Vaitkevicius
fonte

3

Gostaria de saber por que você encontra como solução o "espaço em branco" com "nowrap" ou "pre", não está fazendo o comportamento correto: você força o texto em uma única linha! O texto deve quebrar linhas, mas não as palavras como padrão. Isso é causado por alguns atributos do css: quebra de linha, quebra de estouro, quebra de palavra e hífens. Então você pode ter:

word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Portanto, a solução é removê-los ou substituí-los por "não configurado" ou "normal":

word-break: unset;
word-wrap: unset;
overflow-wrap: unset;
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;

UPDATE: eu também forneço prova com JSfiddle: https://jsfiddle.net/azozp8rr/

— zod
fonte

1

Entendo por que você deseja quebrar as palavras em geral. Mas assumir que não há razão válida para desativar o quebra de linha não faz sentido para mim. Eu tentei rapidamente testar sua solução "não configurada" e ela ainda tinha quebra de linha. Se você acha que deve funcionar, forneça uma demonstração do jsfiddle funcionando.

— Alexander Bird

Não sei por que minha resposta desapareceu. Novamente, você pode forçar a quebra de linha, geralmente as pessoas fazem isso por botões. Mas acho que é um design ruim por motivos de resposta, porque os textos podem sair do contêiner. Enfim, a pergunta era sobre quebra de linha: quebra de palavra, forçada, e você estava perguntando como forçar. Então, eu forneci o código para fazê-lo. O espaço em branco: nowrap é outra coisa, e não está removendo palavras de quebra, está removendo a quebra de linhas inteiras. Também forneço comparação do código com JSfiddle: https://jsfiddle.net/azozp8rr/

— zod

2

Isso funcionou para mim para impedir que intervalos de trabalho tolos acontecessem nas áreas de texto do Chrome

word-break: keep-all;

— Ryan Charmley
fonte