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

Respostas:

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