需要在对角线上放置文字。使用Css

Question

您可以使用Css或Javascript实现吗？ 需要这个Birt报告。

Answer 1

<强> CSS：

.lbl{
     width: 80px;
    float:left;
    margin-left: -22px;
    transform:rotate(-50deg);
-ms-transform:rotate(-50deg); /* IE 9 */
-webkit-transform:rotate(-50deg); /* Opera, Chrome, and Safari */}
.inp {
    float: left;
    margin-top: 50px;
}

HTML

<input type='checkbox' id='cb1' class='inp'>
<div class='lbl'><label for='cb1'>first</label></div>

<input type='checkbox' id='cb2' class='inp'>
<div class='lbl'><label for='cb2'>second</label></div>

<input type='checkbox' id='cb3' class='inp'>
<div class='lbl'><label for='cb3'>third</label></div>

<input type='checkbox' id='cb4' class='inp'>
<div class='lbl'><label for='cb4'>fourth</label></div>

JSFIDDLE-DEMO

Answer 2

像

这样的东西

.diagonal {
  -webkit-transform: rotate(-45deg); 
     -moz-transform: rotate(-45deg); 
      -ms-transform: rotate(-45deg); 
       -o-transform: rotate(-45deg); 
          transform: rotate(-45deg);
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865482, M12=0.7071067811865466, M21=-0.7071067811865466, M22=0.7071067811865482, SizingMethod='auto expand')";
   filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865482, M12=0.7071067811865466, M21=-0.7071067811865466, M22=0.7071067811865482, SizingMethod='auto expand');
}

FIDDLE

Answer 3

其他答案无关紧要，因为他们没有考虑这个问题是在BIRT背景下。简短的回答是BIRT本身不支持此功能。您可以对图表中的标签执行此操作，但不能对数据，动态文本等其他元素执行此操作。

您可以在查看时包含一个css文件，并在声明为＆＃34; HTML＆＃34;的文本元素中使用css规则。类型，但它很难维护，这只适用于html输出：其他格式如PDF和Excel不会考虑css规则。

您最好的选择是利用这个Eclipse项目BIRT control libs，特别是使用＆＃34;对角线文本扩展BIRT＆＃34;控制。

Answer 4

您可以使用属性transform: rotate();定义一个CSS类，并分配给您需要受影响的元素。

在w3schools

中查看此示例

从特定角度旋转文字

Answer 5

您可以使用Css属性transform: rotate();来实现此目的。

Answer 6

你可以简单地使用transform:rotate(x);

transform:rotate(-45deg);
-ms-transform:rotate(-45deg); /* IE 9 */
-webkit-transform:rotate(-45deg); /* Opera, Chrome, and Safari */