テキストを上から下に縦に整列HTML5 CSS3

Question

多言語のWebページがあります。ページ上のボタンにラベルを上下逆に表示する必要があります。私は、次のCSSを使用しています：

HTML：

<button class="btn btn-primary topdown-button"> 
    <div>お客様</div> 
</button> 
<button class="btn btn-primary topdown-button"> 
    <div>Basic 2</div> 
</button> 

CSS：

日本語の文字は、次のとおりです。

.topdown-button{  
    max-height: 150px; 
    min-height: 150px; 
    width: 60px; 
    border: 3px solid navy; 
    vertical-align: top; 
    display:block; 
} 
.topdown-button div{ 
    text-transform: uppercase; 
    vertical-align:top; 
    font-size:18px; 
    min-height: 148px; 
    position:relative; 
    text-align:left; 
    -ms-writing-mode: tb-rl; 
    -webkit-writing-mode: vertical-rl; 
    -o-writing-mode: vertical-rl;   
    writing-mode: vertical-rl; 
    text-transform:uppercase;  
    font-size-adjust:0.5; 
} 

ので、出力はこのようなものです欲望に応じて完全に表示されますが、アルファベットと数字は私はBASIC2を日本の文字のようにしたいです。

B 
A 
S 
I 
C 
2 

どうすればいいですか？通常のアルファベット文字が、私が望んでいない「回転」する傾向がある一方で、私は、私のテキストを変換するために同じロジックを使用していますが、あなたは日本語の文字を見れば、彼らがスムーズに変換します ：説明 FOR

EDIT英語の文字の回転、どうして日本語の文字と同じように表示することはできません。サンプル以下

Answer 1

を使用。

.topdown-button{  
 
    max-height: 150px; 
 
    min-height: 150px; 
 
    width: 60px; 
 
    border: 3px solid navy; 
 
    vertical-align: top; 
 
    display:block; 
 
} 
 
.topdown-button div{ 
 
    text-transform: uppercase; 
 
    vertical-align:top; 
 
    font-size:18px; 
 
    min-height: 148px; 
 
    position:relative; 
 
    text-align:left; 
 
    -ms-writing-mode: tb-rl; 
 
    -webkit-writing-mode: vertical-rl; 
 
    -o-writing-mode: vertical-rl;   
 
    writing-mode: vertical-rl; 
 
    text-transform:uppercase;  
 
    font-size-adjust:0.5; 
 
    text-orientation: upright; 
 
}

<button class="btn btn-primary topdown-button"> 
 
    <div>お客様</div> 
 
</button> 
 
<button class="btn btn-primary topdown-button"> 
 
    <div>Basic 2</div> 
 
</button>

Answer 2

更新

text-orientationがないクロスブラウザ、（まだ）が働きます。

最も簡単なのは<br>を使用して手動で追加したものです。

var elems = document.querySelectorAll('.test div'); 
 
for (var i = 0; i < elems.length; i++) { 
 
    elems[i].innerHTML = elems[i].textContent.split('').join('<br>') 
 
}

.topdown-button{  
 
    max-height: 150px; 
 
    min-height: 150px; 
 
    width: 60px; 
 
    border: 3px solid navy; 
 
    vertical-align: top; 
 
    display: inline-block; 
 
} 
 
.topdown-button div{ 
 
    text-transform: uppercase; 
 
    vertical-align:top; 
 
    font-size:18px; 
 
    min-height: 148px; 
 
    position:relative; 
 
    text-align:center; 
 
    text-transform:uppercase;  
 
    font-size-adjust:0.5; 
 
} 
 

 
.divider{ 
 
    border-top: 1px solid; 
 
    padding: 10px 0; 
 
    margin-top: 10px; 
 
}

<button class="btn btn-primary topdown-button"> 
 
    <div>お<br>客<br>様</div> 
 
</button> 
 
<button class="btn btn-primary topdown-button"> 
 
    <div>B<br>a<br>s<br>i<br>c<br>2</div> 
 
</button> 
 

 
<div class="divider">Sample using script</div> 
 

 
<button class="btn btn-primary topdown-button test"> 
 
    <div>お客様</div> 
 
</button> 
 
<button class="btn btn-primary topdown-button test"> 
 
    <div>Basic2</div> 
 
</button>

2：番目の選択肢、この問題を解決する使用text-orientation: upright;word-break

.topdown-button{  
 
    max-height: 150px; 
 
    min-height: 150px; 
 
    width: 60px; 
 
    border: 3px solid navy; 
 
    vertical-align: top; 
 
    display:block; 
 
    text-align: center; 
 
} 
 
.topdown-button div{ 
 
    text-transform: uppercase; 
 
    font-size:18px; 
 
    min-height: 148px; 
 
    position:relative; 
 
    text-align:center; 
 
    margin: 0 auto; 
 
    word-break: break-all; 
 
    width: 12px; 
 
}

<button class="btn btn-primary topdown-button"> 
 
    <div>お客様</div> 
 
</button> 
 
<button class="btn btn-primary topdown-button"> 
 
    <div>Basic2</div> 
 
</button>

Answer 3

あなたはもっときれいに見えるCSS作るためにフレキシボックスを利用することができます。このpen

HTML

<button class="btn btn-primary topdown-button"> 
    <div>お</div> 
    <div>客</div> 
    <div>様</div> 
</button> 
<button class="btn btn-primary topdown-button"> 
    <div>B</div> 
    <div>A</div> 
    <div>S</div> 
    <div>I</div> 
    <div>C</div> 
    <br> 
    <div>2</div> 
</button> 

を見てCSS

.topdown-button{  
    max-height: 150px; 
    min-height: 150px; 
    width: 60px; 
    border: 3px solid navy; 
    display:flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
} 
.topdown-button div{ 
    text-transform: uppercase; 
    font-size:18px; 
}