我根据这个例子开始了我的代码:https://gist.github.com/aiboy/7406727
我不想要 90 度的变体,而是 270 度的变体,所以阅读方向是从下到上。
在 IE11 中,文本从上到下排列。 在 Chrome 中,它从下到上运行,但是,它随后显示在包装容器之外。
如何让它在 FireFox、Chrome 和 IE8-IE11 中运行?
<style type="text/css">
.text-container {
float: left;
}
.rotated-text {
display: inline-block;
background-color:red;
width: 1.5em;
}
.rotated-text__inner {
display: inline-block;
white-space: nowrap;
/* this is for shity "non IE" browsers
that dosn't support writing-mode */
-webkit-transform: translate(1.1em,0) rotate(270deg);
-moz-transform: translate(1.1em,0) rotate(270deg);
-o-transform: translate(1.1em,0) rotate(270deg);
transform: translate(1.1em,0) rotate(270deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
/* IE9+ */
-ms-transform: none;
-ms-transform-origin: none;
/* IE8+ */
-ms-writing-mode: tb-rl;
/* IE7 and below */
*writing-mode: tb-rl;
}
.rotated-text__inner:before {
content: "";
float: left;
margin-top: 100%;
}
</style>
<div class="text-container">
<div class="rotated-text"><span class="rotated-text__inner">Easy</span></div>
</div>
最佳答案
我的解决方案不是纯 CSS,因为它需要一点 HTML 重组,但我要做的是围绕左上原点旋转 90º,然后将内部容器围绕中心旋转 180º。这涵盖了 Chrome、Firefox、Safari,看起来您已经知道如何使用 IE。
HTML:
<div id="outer">
<div id="inner">Vertical text, bottom to top!</div>
</div>
CSS:
#outer {
background-color: red;
color: white;
line-height: 1em;
padding: .5em;
-webkit-transform: translateX(2em) rotate(90deg);
-moz-transform: translateX(2em) rotate(90deg);
-ms-transform: translateX(2em) rotate(90deg);
transform: translateX(2em) rotate(90deg);
-webkit-transform-origin: 0 0 0;
-moz-transform-origin: 0 0 0;
-ms-transform-origin: 0 0 0;
transform-origin: 0 0 0;
float: left;
}
#inner {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
关于css - 使用纯 CSS 的垂直文本在浏览器之间不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29857850/