需要在文本框中对角放置文本。使用Css

Question

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

Answer 1

其他的答案是不相关的，因为他们没有考虑到这个问题是在BIRT环境。简短的答案是BIRT本身不支持这项功能。您可以为图表中的标签执行此操作，但不适用于数据，动态文本等其他元素。

您可以在查看时包含css文件，并在声明为“HTML”的文本元素中使用css规则“类型，但维护起来很复杂，这只适用于html输出：其他格式（如PDF和Excel）不会考虑CSS规则。

你最好的选择是利用这个Eclipse项目BIRT control libs，它扩展了BIRT特别是“对角文本”控件。

Answer 2

那么你可以定义一个属性为transform: rotate();的CSS类，并分配给你需要受到影响的元素。

检查这个例子中w3schools

从一个特定的角度

Answer 3

旋转文本可以使用CSS属性transform: rotate();实现这一目标。

Answer 4

喜欢的东西

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

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 6

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

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