Как я могу полностью контролировать вращение <div> - PullRequest
Новая
       51

Как я могу полностью контролировать вращение <div>

0 голосов
/ 19 ноября 2018

Как я могу полностью контролировать вращение div с помощью CSS?

Я уже давно борюсь с этим, но, похоже, ничего не работает должным образом.Я использую это для документа, который должен быть как можно более кратким, и каждый раз, когда мне нужно повернуть div внутри ячейки таблицы, ширина этой ячейки становится неуправляемой, связанной с длиной слова, записанного внутри.

Сейчас я использую приведенный ниже код, хотя я пытался использовать другие методы.

Моя цель - уменьшить ширину левой ячейки и сделать ее более подходящей дляшрифт, освобождая пространство.

Screenshot

Мой 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>

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Данные таблицы с шириной 1% имеют абзац, который мы можем просто повернуть, но когда есть более или менее символ, вам нужно вручную настроить поля и отступы для центрального класса. 

.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>
0 голосов
/ 19 ноября 2018

То, что вы видите, это то, что механизм компоновки вычисляет ширину элемента перед применением преобразования. Простой способ справиться с этим - добавить отрицательное горизонтальное поле: 

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