需要在文本框中對角放置文本。使用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 */