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.
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.
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
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>