用HTML5 CSS3垂直对齐文本从顶部到底部

Question

我是一个有用的助手，可以翻译文本。

我有一个多语言网页。需要将页面上按钮上的标签倒置显示。我正在使用以下CSS：

HTML：

(Note: This text is already in Chinese, so I have not provided a translation.)

<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

我该如何实现这个？ 解释编辑： 我正在使用相同的逻辑来转换我的文本，但是如果您看一下日语字符，它们会平滑地转换，而正常字母字符往往会“旋转”，我不希望英文字母旋转，为什么它们不能像日语字符一样显示。

- progrAmmar

---

可能是垂直文本方向的重复问题。 - Bhavik Patel

这不是重复问题，那个问题并不能解决我的问题。 - progrAmmar

Answer 1

更新

下面的样例可以在所有浏览器上工作，但是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>  

第二种选择，使用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>

- Asons

---

数据通过数据库提供给应用程序，按钮是动态创建的。 - progrAmmar

@progrAmmar 更简单的方法是，使用脚本动态创建它们，只需拆分/连接字符并在它们之间添加<br>即可。 - Asons

@progrAmmar 如果你想的话，我可以稍后将该解决方案添加到我的答案中，现在需要去工作了。 - Asons

谢谢，我了解你的意思。问题是项目经理不希望将单词拆分，因为HTML将是"B<br />A<br />S<br />,,,,,,"，这可能不可接受，他们希望HTML干净，并且名称拼写的方式保持不变。是否可以在CSS中实现无需使用br进行换行？word-wrap: break-word;怎么样？ - progrAmmar

@progrAmmar 更新了我的答案，展示了三种跨浏览器的方式，而被接受的答案不是，因为它在Edge和Safari上无法工作（尚未）。 - Asons

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

- Jinu Kurian

---

@progrAmmar 很遗憾，这个 CSS 规则是实验性的。你需要编写 IE 特定的样式表或黑客才能在 IE 中使用它 - https://developer.mozilla.org/en/docs/Web/CSS/text-orientation - Jinu Kurian

Answer 3

你可以利用flexbox使你的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;
 }

- devellopah