Orientez le texte verticalement en HTML comme dans Excel

Question

J'essaie de reproduire la fonction de texte vertical d'Excel en HTML et je me demande si quelqu'un a déjà essayé cela ou sait comment le faire facilement?

Je veux que mon texte ressemble:

T

H

Je

S

à l'intérieur d'un élément <th>

Answer 1

Vous pouvez essayer this. Donne un peu plus de contrôle sur l'espacement que l'utilisation <br />

Sur le 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; 
    } 

Et le balisage:

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

Answer 2

IE-only soltuion:

<div style="writing-mode:tb-rl;filter: flipv fliph;"> 
    The Vertical Text 
</div> 

Vous pouvez essayer la même chose pour l'étiquette.