html – 如何旋转单个字母并保持它们从左到右流动？

发布时间：2020-12-14 18:48:21 所属栏目：资源来源：网络整理

导读：我试图得到每个字母旋转90度的字符串;然而,我想保持字母从左到右,而不是垂直的“流动”.我也想保持“删除线”水平绿线(见下图). 最简单的方法是什么？我更喜欢使用JavaScript和/或CSS. 使用-transform：旋转CSS样式我得到以下内容： style type="text/css".r

我试图得到每个字母旋转90度的字符串;然而,我想保持字母从左到右,而不是垂直的“流动”.我也想保持“删除线”水平绿线(见下图).

最简单的方法是什么？我更喜欢使用JavaScript和/或CSS.

使用-transform：旋转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);
}?

Demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!