4

Estou transformando um documento word em html, porém não sei como fazer para escrever o texto dessa forma: inserir a descrição da imagem aqui

Alguém saberia como?

3 Respostas 3

8

Você pode usar transform: rotate(270deg) para deixar o texto na vertical conforme a imagem.

2
  • Obrigado @RaimundoNorberto, funcionou aqui com 270deg 6/09/2016 às 14:17
  • Desculpa, valor errado, vou arrumar... =) 6/09/2016 às 14:19
4

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:

horizontal-tb

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>

vertical-rl

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>

vertical-lr

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 e sideways-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 e tb-rl estão em desuso, mas ainda são suportados pelo SVG1 ou para navegadores mais antigos:

1
2

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>

2
  • Boa tbm, acabei de ver que vou precisar de algo assim também em breve rs 6/09/2016 às 14:26
  • É, a princípio é diferente do que pede, mas se for precisar usar para idiomas escritos na vertical, ai vai...
    – MagicHat
    6/09/2016 às 14:28

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 .