如何旋转单个字母并保持它们从左到右流动？ [英] How do I rotate individual letters and keep them flowing left-to-right?
本文介绍了如何旋转单个字母并保持它们从左到右流动？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图得到一个字符串，每个字母旋转90度;然而，我想保持字母的流从左到右，而不是垂直。我也想保持删除水平绿线（见下图）。
I am trying to get a string with each individual letter rotated 90 degrees; however, I want to keep the "flow" of letters going left-to-right, not vertical. I also want to keep that "strikethrough" horizontal green line (see images below).
这是最简单的方法是什么？我喜欢使用JavaScript和/或CSS。
What's the simplest way to accomplish this? I prefer using JavaScript and/or 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>
我想得到的是这样的东西，而不是使用自定义字体。
What I would like to get is something like this, without resorting to a custom font.
>
推荐答案
纯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);
}
Demo
这篇关于如何旋转单个字母并保持它们从左到右流动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
