CSS怎么让文字竖着排列

html-css023

CSS怎么让文字竖着排列,第1张

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

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

1、首先打开hbuilder软件，新建一个html文件，里面写入一个div并设置class属性，在上方耳朵style标签中设置body标签的背景色，方便后面观察效果。

2、然后设置class的样式，这里给div一个比较小的宽度并设置行高和边框，然后设置word-warp属性，该属性表示允许长单词换行到下一行，再设置一下letter-spacing调整每个字之间的距离就可以了。

3、最后打开浏览器就可以看到竖排的文字了。

语法：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，这样就自动换行了。