Quebra automática de texto dentro de tipo de entrada = elemento de “texto” HTML / CSS

98

O HTML mostrado abaixo,

<input type="text"/>

é exibido em um navegador assim:

Quando eu adiciono o seguinte texto,

A ligeira raposa marrom saltou sobre o cão preguiçoso.

Usando o HTML abaixo,

<input type="text" value="The quick brown fox jumped over the lazy dog."/>

ele é exibido em um navegador assim:

Mas eu gostaria que fosse exibido em um navegador como este:

Eu quero que o texto em meu elemento de entrada seja quebrado. Isso pode ser feito sem uma área de texto?

html input word-wrap Web designer
fonte
3
Não, acho que não. Mas por que uma área de texto não é uma opção?
Pekka,
37
Usar uma área de texto às vezes não é uma opção, porque você não deseja permitir a entrada de várias linhas de texto. Apenas para quebrar uma única linha de texto (Nota: Eles não são a mesma coisa).
Flatliner DOA de
Há uma solução discutida para esse propósito exato com o CSSWG para padronização, mas infelizmente não consigo encontrar o problema.
Nulo
Eu encontrei; github.com/w3c/csswg-drafts/issues/2141
Nulo
1
@Pekka 웃 não que seja relevante, mas alguns motivos incluem: não podemos usar a validação html5 em áreas de texto; não podemos usar restrições de padrão para validar áreas de texto; uma textarea é um sinônimo desnecessário para uma entrada type = text (é uma entrada que é um tipo de texto!) que significa duas vezes o estilo, etc, etc. Em suma, há muitos motivos.
Peter Kionga-Kamau

Respostas:

63

Esse é o textareatrabalho de - para entrada de texto de várias linhas. Eles input não vão fazer isso ; não foi projetado para isso.

Portanto, use um textarea. Além de suas diferenças visuais, eles são acessados ​​via JavaScript da mesma forma ( valuepropriedade de uso ).

Você pode evitar que novas linhas sejam inseridas por meio do inputevento e simplesmente usando um replace(/\n/g, '').

alex
fonte
74
Isso realmente não responde à questão de como coletar uma única linha de entrada enquanto a exibe quebrada durante a entrada.
ehdv de
3
Um grande problema com isso é que uma área de texto suprime o botão ir em dispositivos móveis.
Dan
2
@alex Exatamente. Portanto, se você deseja uma entrada multilinha real, uma área de texto é melhor, mas se você deseja apenas uma entrada com quebra de linha, a solução css é melhor.
Dan
1
Eu estava prestes a dizer que <textarea>isso não funciona com coisas como o preenchimento automático do jQuery, mas apenas altere o <input>para <textarea>e isso é tudo o que é necessário. Viva os padrões!
Sablefoste
9
Como dito acima: Wrapping a line! == uma string de várias linhas. Não sei por que essa é a resposta aceita, pois não responde à pergunta.
mattLummus de
36

A quebra de palavras irá imitar algumas das intenções

    input[type=text] {
        word-wrap: break-word;
        word-break: break-all;
        height: 80px;
    }
<input type="text" value="The quick brown fox jumped over the lazy dog" />
Expandir snippet

Como alternativa, esta solução perdeu sua eficácia em alguns navegadores. Verifique a demonstração: http://cssdesk.com/dbCSQ

Thiago Macedo
fonte
7
Acabei de testá-lo no Firefox 43.0.4 e ele não funciona, mas no Safari 9 e Chrome 48 parece funcionar: cssdesk.com/dbCSQ
Jason Sperske
6
A demonstração anexada por @JasonSperske não funciona para mim nem no Firefox 45 nem no Chrome 50.
czerny
A demonstração funciona para mim no Chrome 48 no Linux, mas o mesmo css na minha página não.
Mnebuerquo de
43
A solução ficou desatualizada pelo menos a partir do Chrome 50 :(
userlond
5
Esqueça esta solução: não funciona com Chrome 74/75, Firefox 63/67, Edge 42, IE 11 e UCBrowser 7.0 (mas funciona com GNOME Web 3.28 - AppleWebKit / 605.1.15)
tanguy_k
10

Você não pode usar a entrada para isso; em vez disso, você precisa usar textarea. Use textarea com o wrap="soft"código e opcional o restante dos atributos como este:

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

Atributos: Para limitar a quantidade de texto nele, por exemplo, a "40" caracteres, você pode adicionar o atributo maxlength="40"como este: <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> Para ocultar a rolagem, o estilo para ele. se você usar apenas overflow:scroll;ou overflow:hidden;ou overflow:auto;terá efeito apenas para uma barra de rolagem. Se você quiser atributos diferentes para cada barra de rolagem, use os atributos como este overflow:scroll; overflow-x:auto; overflow-y:hidden;na área de estilo: Para tornar a área de texto não redimensionável, você pode usar o estilo da resize:none;seguinte forma:

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

Dessa forma, você pode ter ou exemplo uma área de texto com 14 linhas e 10 cols com quebra de linha e comprimento máximo de "40" caracteres que funciona exatamente como uma caixa de texto de entrada, mas com linhas ao invés e sem usar texto de entrada.

NOTA: textarea funciona com linhas, ao contrário de uma entrada <input type="text" name="tbox" size="10"></input>que é feita para não funcionar com linhas.

SeekLoad
fonte
7

Para criar uma entrada de texto em que o valor subjacente é uma string de linha única, mas é apresentado ao usuário em um formato de quebra de linha, você pode usar o atributo contenteditable em um <div>ou outro elemento:

const el = document.querySelector('div[contenteditable]');

// Get value from element on input events
el.addEventListener('input', () => console.log(el.textContent));

// Set some value
el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'
div[contenteditable] {
  border: 1px solid black;
  width: 200px;
}
<div contenteditable></div>
Expandir snippet

Sam Herrmann
fonte