13

個々の文字を 90 度回転させた文字列を取得しようとしています。ただし、文字の「流れ」を垂直ではなく、左から右に保ちたいと考えています。また、その「取り消し線」の水平の緑色の線を維持したいと考えています (下の画像を参照)。

これを達成する最も簡単な方法は何ですか? JavaScript や CSS を使用することを好みます。

CSS スタイルを使用-transform: rotateすると、次のようになります。

欲しくない

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

私が得たいのは、カスタムフォントに頼らずに、このようなものです。

ここに画像の説明を入力

4

4 に答える 4

10

純粋な 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);
}​

デモ

于 2012-09-27T22:51:24.153 に答える
4

トリックを行う必要がある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"
        });
    });
});

そして、それが質問の一部だと思っていたので、誤ってボーナスシフトローテーションを投入しました.

于 2012-09-27T22:48:50.597 に答える
3

私の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> 
&nbsp; <span class=rot-90 char="F"></span>ar far 
a<span class=rot45 char="w"></span>way

結果

于 2014-11-13T15:18:23.533 に答える
0

これはChromeの最新バージョンで動作します

<span style="color:#000; display: inline-block; max-width: 10px;">
A B C
</span>

でも最も内側のスパンを書いただけです

于 2012-09-27T22:46:33.310 に答える