如何让 html中 按钮文字竖向显示

html-css016

如何让 html中 按钮文字竖向显示,第1张

让文字竖排有以下三种方法：一，原始使用writing-mode属性-不推荐。1，语法：writing-mode:lr-tb或writing-mode:tb-rl；2，参数：1、lr-tb：从左向右，从上往下2、tb-rl：从上往下，从右向左运行代码发现，IE显示正常，火狐、谷歌浏览器却不支持，所以不建议使用writing-mode属性。二、使用CSS模拟文字竖排。对文字对象宽度设置只能排下一个文字的宽度距离，让文字一行排不下两个文字使其文字自动换行，就形成了竖立排版需求。示例代码如下： <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /><title>竖列排版实例</title><style>body{text-align:center} .shuli{ margin:0 autowidth:20pxline-height:24pxborder:1px solid #333} </style></head><body><div class="shuli">我是竖列排版</div></body></html>说明：对文字DIV设置较小的宽度，以达到一排只能排下一个文字，这样文字就自动换行，实现垂直竖列排版。

CSS让文字竖着排列,我们可以使用CSS，在需要竖向显示的地方，强制定义显示区域的宽度，这样字符会自动竖向排列：请看具体代码：

推荐使用这种方法，觉得这个方法兼容性也好，而且代码简洁，字符也容易控制。