texto Orient verticalmente em HTML como em Excel
-
18-09-2019 - |
Pergunta
Eu estou tentando replicar recurso Texto vertical do Excel em HTML e saber se alguém já tentou isso ou sabe de uma maneira fácil de fazer isso?
Eu quero o meu texto para parecer:
T
H
I
S
dentro de um elemento <th>
Solução
Você poderia tentar este . Dá um pouco mais de controle sobre o espaçamento de usar <br />
A partir do site:
CSS:
#vertical {
width:15em;
padding:0;
margin:0 auto;
list-style-type:none;
font-size:1.4em;
font-family:georgia, "times new roman", serif;
}
#vertical li {
float:left;
border:0.2em solid #eee;
margin:0.1em;
}
#vertical li a {
text-decoration:none;
color:#000;
display:block;
width:1.5em;
height:1.5em;
border-top:0.1em solid #000;
height:auto;
}
#vertical li a em {
font-style:normal;
display:block;
text-align:center;
background:#fff;
border-left:0.1em solid #000;
border-right:0.1em solid #000;
}
#vertical li a em.nd {
border-bottom:0.1em solid #000;
}
#vertical li a:hover {
background:#eee;
}
#vertical li a:hover em {
background:#eee;
color:#800;
}
E a marcação:
<ul id="vertical">
<li>
<a href="../menu/index.html">
<em>D</em><em>E</em><em>M</em>
<em>O</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../menus/index.html">
<em>M</em><em>E</em><em>N</em>
<em>U</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../layouts/index.html">
<em>L</em><em>A</em><em>Y</em><em>O</em>
<em>U</em><em>T</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../boxes/index.html">
<em>B</em><em>O</em><em>X</em>
<em>E</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../mozilla/index.html">
<em>M</em><em>O</em><em>Z</em><em>I</em>
<em>L</em><em>L</em><em class="nd">A</em>
</a>
</li>
<li>
<a href="../ie/index.html">
<em>E</em><em>X</em><em>P</em><em>L</em>
<em>O</em><em>R</em><em>E</em><em class="nd">R</em>
</a>
</li>
<li>
<a href="../opacity/index.html">
<em>O</em><em>P</em><em>A</em><em>C</em>
<em>I</em><em>T</em><em class="nd">Y</em>
</a>
</li>
</ul>
Outras dicas
IE-única solução:
<div style="writing-mode:tb-rl;filter: flipv fliph;">
The Vertical Text
</div>
Você pode tentar a mesma coisa para po tag.
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow