Question

我有以下代码：

CSS

.a4{
    height:297mm;
    width:210mm;
    border:1px solid black;
}

.left{
    height:297mm;
    width:15mm;
    background-color:blue;
    float:left;
    overflow:none;
    position:absolute;
}

.left_text{
    position:absolute;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: lr-tb;
    color:white;
    font-size:40pt;
}

HTML / PHP

<div class="a4">
<div class="left">
        <span class="left_text"><?php echo $brand." snapshot survey"?></span>
</div>
</div>

JSFiddle ：http://jsfiddle.net/5QL62/1/

我遇到的问题是无法看到旋转的文字。我假设（显然不正确）文本只是在从底部到顶部的`.left'div内。

任何关于我出错的建议，反馈和解决方案都将不胜感激。

Answer 1

在jsfiddle中尝试这个

       <div class="a4">
      <div class="left">
      <span class="left_text">snapshot survey</span>
      </div>
      </div>

你的css将保持不变

Answer 2

尝试使用属性“horizontal-bt”。这将解决您的问题。 Check link here http://jsfiddle.net/5QL62/9/

CSS旋转文本无法正确显示

2 个答案: