rotated text
От: c-smile Канада http://terrainformatica.com
Дата: 15.11.14 17:02
Оценка: 37 (3)
Если вам нужно изобразить нечто типа этого (текст повернутый на 90 градусов)


то вот пример

<html>
  <head>
    <title>Rotated multiline text</title>
    <style>
    
    body { font:10pt verdana,sans-serif; }

    table { border:1px dashed blue; border-spacing:0; padding:0 }

    td { padding:0.5em; }
    
    td.rotated { 
      overflow:visible;
      width:2.4em;
      border-right:1px dashed gray;
      height:12em; /* this should match, text width below */
      horizontal-align:middle;
      vertical-align:middle;
    }
    
    td.rotated > text { width:12em; height:2.4em; transform:rotate(-90deg); text-align: center;}
    td.another { border-top:1px dashed gray; }
    
</style>
  </head>
<body>
  <p>example of text 90° rotated</p> 
  <table>
    <tr>
      <td rowspan="2" class="rotated"><text>multiline text<br>90° rotated</text></td>
      <td>ordinary cell</td>
    </tr>
    <tr>
      <td class="another">another ordinary cell</td>
    </tr>
  </table>

</body>
</html>


свистим если нужны пояснения
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.