Como criar texto vertical usando apenas CSS?
-
12-09-2019 - |
Pergunta
É possível criar texto vertical usando apenas CSS, compatível com IE6 +?
Por média verticais I
F
O
O
B
A
R
Solução
Editado: Você pode tentar o seguinte:
p {
letter-spacing: 1000px; // more than width of parent
word-wrap: break-word; // seems to work in at least Firefox and IE7+
}
Isso parece funcionar no Firefox 3.5 e IE7 + (não têm acesso ao IE6 agora). A única coisa que está faltando essa solução é uma nova linha extra para um espaço, o resultado é algo como:
F
O
O
B
A
R
Outras dicas
Hoje não é possível de forma agnóstica browser. Espere por CSS3.
Isso funciona no IE, mas infelizmente não FF:
.verticaltext
{
writing-mode: tb-rl;
filter: fliph flipv;
}
Você pode conseguir algo semelhante (pelo menos no IE) usando este CSS:
.verticaltext {
writing-mode: tb-rl;
}
Mas isso vai girar os caracteres em 90 graus no sentido horário.
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow