我有一个多语言网页。需要在页面上的按钮上显示标签。我使用以下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
我怎样才能做到这一点?
编辑说明: 我使用相同的逻辑来转换我的文字,但是如果你看日文字符就会顺利转换,而正常的字母字符往往“旋转”我不想轮换英文字符,为什么不能显示与日文字符相同。
答案 0 :(得分: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>')
}
&#13;
.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;
}
&#13;
<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>
&#13;
2:替代方案,使用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;
}
&#13;
<button class="btn btn-primary topdown-button">
<div>お客様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>Basic2</div>
</button>
&#13;
答案 1 :(得分:2)
使用text-orientation: upright;
这将解决问题。
.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>
答案 2 :(得分:0)
你可以利用flexbox让你看起来更干净。看这个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;
}