html - 按钮中的垂直文本

Question

所以我是新手，我正在尝试修改 Windows CE 设备上的代码以使文本在按钮中垂直显示。

我的代码是:

.philips_menu_button { 
BACKGROUND-IMAGE : url(dynalite/images/buttons/philips/Philips_Button_Menu.png); 
TEXT-ALIGN : center; 
WIDTH : 128px; 
HEIGHT : 32px; 
COLOR : #07529c; 
FONT-WEIGHT : 600; 
dynalite-type : button-theme; 
upImage : dynalite/images/buttons/philips/Philips_Button_Menu.png; 
downImage : dynalite/images/buttons/philips/Philips_Button_Menu_pressed.png; 
text-offsety : 0; 
text-offsetx : 0; 
}

和

<dynalite:button style="BACKGROUND-IMAGE: none; POSITION: absolute; WIDTH: 80px; HEIGHT: 70px; FONT-SIZE: 20px; OVERFLOW: hidden; TOP: 230px; LEFT: 700px; dont_layout: true; textid: Button_0001_txt; Button_0001_txt: " id=Button_0001 class="philips_menu_button swap_page" onclick="TouchPanel.GoToPage( './Edit Presets.html')" alpha="False" ATOMICSELECTION="true" text="Edit<br>&#10;Levels">
        <IMG style="POSITION: absolute; VISIBILITY: inherit; TOP: 0px; LEFT: 0px" id=Button_0001_img src=".\dynalite\images\buttons\philips\philips_button_menu.png" width=80 height=70> 
        <IMG style="POSITION: absolute; VISIBILITY: hidden; TOP: 0px; LEFT: 0px" id=Button_0001_img_1 src=".\dynalite\images\buttons\philips\philips_button_menu_pressed.png" width=80 height=70> 
                <DIV style="Z-INDEX: 998; POSITION: absolute; OVERFLOW: visible; TOP: 50%; LEFT: 0px">
                    <DIV style="Z-INDEX: 999; POSITION: relative; WIDTH: 80px; TOP: -50%; LEFT: 0px" id=Button_0001_txt>Edit 
                        <BR>Levels 
                    </DIV>
                </DIV>

基本上屏幕设计为横向，但我想将其旋转 90 度。我可以处理必须旋转按钮或文本。

提前致谢。

史蒂夫

Answer 1

如果你想旋转按钮，你可以使用带有转换的 css 方法。

<input type="button" value="edit" style="transform:rotate(7deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */"/>

如果您希望文本直立显示而不是旋转，一个选项是使用 jquery..

html部分:

<input type="button" value="edit" id="vert" style="width:1.5em;">

jquery部分:

$(document).ready(function() {
         $('#vert').val('e\nd\ni\nt');   
        });

在这里查看.. http://codepen.io/lukeocom/pen/mHnvl