css或者html5中，如何让文字从下往上显示，英文的，就像正常的一行字逆

html-css09

css或者html5中，如何让文字从下往上显示，英文的，就像正常的一行字逆,第1张

用JS把文字倒序

var reverse = function(str){

return str.split('').reverse().join('')

}

然后放置文字的标签的css写上 writing-mode:vertical-lr

1、打开html开发软件工具，新建一个html代码页面，创建一个<div>，同时给这个<div>添加一些文本内容和一个class类为 oblique。

2、使用font-style: oblique设置字体倾斜。创建<style>标签，然后在这个标签里面设置oblique类font-style属性为oblique。

代码：

<style>

.oblique{

font-style: oblique

}

</style>

3、最后，可以用链接打开可以看到已经倾斜45度，就是上面的代码编写即可。

一、使用writing-mode搜索属性

语法：writing-mode:lr-tb或writing-mode:tb-rl

参数：

1、lr-tb：从左向右，从上往下

2、tb-rl：从上往下，从右向左

运行代码发现，IE显示正常，火狐却不行，所以不建议使用writing-mode属性，下面使用模拟方法实现。

　二、模拟文字竖排

代码：

ul{width:100pxheight:80pxoverflow:hiddenlist-style:none}

ul li{float:rightdisplay:inlinemargin-left:4pxwidth:14pxheight:100pxfont-size:14pxword-wrap:break-wordword-break:nomal}

此方法让li右浮动，设置li宽度和字宽度一样都是14px，这样就自动换行了。另外，“word-wrap:break-wordword-break:nomal”这句实现标点自动换行（连续字符自动换行）。