我怎样才能完全控制 <div> 旋转

Question

如何使用 CSS 完全控制 div 的旋转？

我已经为此苦苦挣扎了一段时间，但似乎没有什么能正常工作。我将它用于需要尽可能简洁的文档，每次我需要在 table 单元格内旋转 div 时，该单元格的宽度变得无法控制，链接到里面写的字的长度。

现在我正在使用下面的代码，尽管我一直在尝试使用其他方法。

我的目标是减少左侧单元格的宽度，使其更适合字体，释放 space。

我的CSS:

.rotate {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    writing-mode: lr-tb;
}

还有我的 HTML:

<table class="TABELLA1" width="400px" align="left">
    <tr height="90px">
        <td width="1%">
            <p id="idcliente" class="A8BL rotate">C</p>
        </td>
        <td width="99%">
            <div>
                <div class="A8BL">
                    FACTORY 1<br>
                    253190 MILANO (IT)<br>
                </div>
                <div class="A8L">
                    Tel. 02 669172284<br>
                    e-mail: info@alufaoj.it
                    Cod. Fisc. <br>
                    e Partita IVA 2251364245341126
                </div>
            </div>
        </td>
    </tr>
</table>

Answer 1

您看到的是布局引擎在应用转换之前计算元素的宽度。处理这个问题的一种简单方法是添加负水平边距：

.rotate {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    writing-mode: lr-tb;
    margin: 0 -1.5em;
}

<table class="TABELLA1" width="400px" align="left">
    <tr height="90px">
        <td width="1%">
            <p id="idcliente" class="A8BL rotate">CLIENTE</p>
        </td>
        <td width="99%">
            <div>
                <div class="A8BL">
                    FACTORY 1<br>
                    253190 MILANO (IT)<br>
                </div>
                <div class="A8L">
                    Tel. 02 669172284<br>
                    e-mail: info@alufaoj.it
                    Cod. Fisc. <br>
                    e Partita IVA 2251364245341126
                </div>
            </div>
        </td>
    </tr>
</table>

Answer 2

Table 宽度为 1% 的数据有一个我们可以简单地旋转的段落，但是当有更多或更少的字符时，您必须手动调整中心的边距和填充 class.

.rotate {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
    margin: 0 -1.6em;
}

<table class="TABELLA1" width="400px" align="left">
    <tr height="90px">
        <td width="1%">
            <p id="idcliente" class="A8BL rotate">CLIENTE</p>
        </td>
        <td width="99%">
            <div>
                <div class="A8BL">
                    FACTORY 1<br>
                    253190 MILANO (IT)<br>
                </div>
                <div class="A8L">
                    Tel. 02 669172284<br>
                    e-mail: info@alufaoj.it
                    Cod. Fisc. <br>
                    e Partita IVA 2251364245341126
                </div>
            </div>
        </td>
    </tr>
</table>

我怎样才能完全控制 <div> 旋转

How can I fully control a <div> rotation

html

javascript

css

html-table

center