我想获得一个字符串，每个单独的字母旋转90度;不过，我想保持字母的“流动”从左到右，而不是垂直。我也想保留那条“删除线”水平的绿线（见下图）。如何旋转单个字母并让它们从左向右流动？
完成此操作的最简单方法是什么？我更喜欢使用JavaScript和/或CSS。
随着-transform: rotate CSS样式我得到如下：
<style type="text/css">
.rotate {
-webkit-transform: rotate(-90deg);
}
</style>
<body>
<div class="rotate">
<span style="color:#0C0; text-decoration:line-through;">
<span style="color:#000;">
A B C
</span></span></div>
我想得到的是这样的事情，而不是诉诸自定义字体。
纯CSS：
<div class="letters">
<span>A</span><span>B</span><span>C</span>
</div>
.letters {
height:8px;
line-height:16px;
border-bottom:1px solid green;
position:relative;
}
.letters > span {
float:left;
-webkit-transform: rotate(-90deg);
}
这正是我所错过的。谢谢:) –
通过@Matt Whipple的“自动扳手”功能，编写长文本并将其包装成跨度会更容易！ – Giona
下面是一些JS应该做的伎俩：http://jsfiddle.net/AYGDR/8/
$(function() {
$(".target").html(("<span>" + $(".target").html().split(" ").join("</span><span>") + "</span>"));
var rotate = 0;
$(".target span").each(function() {
rotate = rotate - 90
$(this).css({
"-webkit-transform": "rotate(" + rotate + "deg)",
"display": "inline-block"
});
});
});
我不小心扔了在一些奖金轮换旋转，因为我想这是问题的一部分。
我的CSS：
<style>
span[class^="rot"]:not([char]):before{
content: '\27b7'; }
span[class^="rot"][char]:before{content: attr(char);}
span[class^="rot"] { position: relative; }
span[class^="rot"]:before {
position: relative; display: inline-block;
font-weight: bold; font-size: 16px; line-height:16px;
font-family: Tahoma, Verdana, sans-serif;
margin:0;padding:0;
width:16px;height:16px;
}
.rot-90:before { transform: rotate(-90deg); }
.rot90:before { transform: rotate(90deg); }
.rot45:before { transform: rotate(45deg); }
.rot-45:before { transform: rotate(-45deg); }
.rot180:before { transform: rotate(180deg); }
</style>
<p>
A long time <span class=rot90 style="color: green"></span> ago in a
<span class=rot-45 char="G"></span>alax<span class=rot180 char="y"></span>
<span class=rot-90 char="F"></span>ar far
a<span class=rot45 char="w"></span>way
您是否尝试过在一个跨度包装的每个字母？ – Giona
@GionaF是的，我现在只是尝试span和div。不要做我想要的东西http://jsfiddle.net/UsMxL/1/ http://jsfiddle.net/UsMxL/ –
你只需要一个像'inline-block'一样的'display'：http：// jsfiddle .net/UsMxL/3/ –