Estou transformando um documento word em html, porém não sei como fazer para escrever o texto dessa forma:
Alguém saberia como?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeVocê pode usar transform: rotate(270deg)
para deixar o texto na vertical conforme a imagem.
Fora o rotate (que irá modificar todo o div) se você quiser apenas alterar a escrita, sem afetar o background
, border
e espaçamentos, você pode usar o writing-mode
.
O vem por padrão como horizontal-tb
, e terá as seguinte opções:
O conteúdo segue horizontalmente da esquerda para a direita e na vertical de cima para baixo. A próxima linha horizontal está posicionado abaixo da linha anterior.
.foo { writing-mode: horizontal-tb; }
<div class="foo">
Olá mundo novo!<br>
Quebra de linha
</div>
O conteúdo segue verticalmente de cima para baixo e horizontalmente da direita para a esquerda. A linha vertical ao lado está posicionada à esquerda da linha anterior.
.foo { writing-mode: vertical-rl; }
<div class="foo">
Olá mundo novo!<br>
Quebra de linha
</div>
O conteúdo segue verticalmente de cima para baixo, na horizontal da esquerda para a direita. A linha vertical seguinte é posicionada à direita da linha anterior.
.foo { writing-mode: vertical-lr; }
<div class="foo">
Olá mundo novo!<br>
Quebra de linha
</div>
Também existe a propriedade direction
, que suporta os valores ltr
(esquerda para direita) e rtl
(direita para esquerda), mas isto é usado geralmente para textos com caracteres de diferentes linhagens (o que pode-se ser util se combinado com unicode-bidi: bidi-override;
).
Sem unicode-bibi
:
.foo { direction: ltr; }
.baz { direction: rtl; }
<div class="foo">Olá mundo novo!</div>
<div class="baz">Olá mundo novo!</div>
Com unicode-bidi
:
.foo {
direction: ltr;
unicode-bidi: bidi-override;
}
.baz {
direction: rtl;
unicode-bidi: bidi-override;
}
<div class="foo">Olá mundo novo!</div>
<div class="baz">Olá mundo novo!</div>
Note que ainda existem o
sideways-rl
esideways-lr
(provavelmente era este que você necessitava), mas são experimentais e não é suportado por todos navegadores.Note também que os valores
lr
,lr-tb
,rl
etb-rl
estão em desuso, mas ainda são suportados pelo SVG1 ou para navegadores mais antigos:
Outra sugestão.
.textovertical{
width:1px;
word-wrap: break-word;
font-family: monospace;
white-space: pre-wrap;
}
<p class="textovertical">
Olá esse é um texto vertical !
</p>