8

Preciso criar uma LABEL ou Input para que o texto digitado fique na Vertical, da seguinte maneira:

M
E
U 

T
E
X
T
O

Isso Seria possível de Alguma Maneira? Isso é necessário para a impressão de banners neste formato.

1
  • O texto ficará sempre nesse formato com uma letra por linha? Ou dependerá de alguma largura? Commented 19/07/2016 às 16:18

2 Respostas 2

6

Aqui tem um exemplo de como colocar o texto vertical em outro elemento:

var ele_input = document.getElementById('vert');
var ele_text = document.getElementById('put-text');
ele_input.addEventListener('keyup', function(){
    // vamos tranformar o conteudo (texto) num array com todos os caracteres, colocar um <br> entre cada caracter e voltar a transformar em texto
    ele_text.innerHTML = ele_input.value.split('').join('<br>');
})
<input id="vert">
<div id="put-text"></div>

EXEMPLO no jsfiddle

0

Atualmente com CSS vc consegue o mesmo resultado, e até com um bom suporte dos browsers como vc pode consultar aqui: https://caniuse.com/#feat=css-text-orientation (não funciona no IE ou Edge)

Com a propriedade text-orientation: upright vc define se o texto começa verticalmente de lr left para right ou de rl right para left. Já com o text-orientation vc coloca os caracteres "um sobre o outro" verticalmente Aqui vc pode ler a documentação da Mozilla sobre o assunto: https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation#Values

Veja como fica no exemplo:

p {
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  text-orientation: upright;

  height:135px;
  border:1px solid
}
<p>texto na vertical</p>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .