css将横着的字竖起来的实现方法

　　介绍

小编给大家分享一下css将横着的字竖起来的实现方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

css把横着的字竖起来的实现方法:首先创建一个HTML示例文件,然后定义一个div文字,最后设置css样式为“{宽度:20 px;保证金:0汽车;行高:24 px;}”即可将文字竖起来。

1,一个句子的竖向排列

如图:

css将横着的字竖起来的实现方法

& lt; ! DOCTYPE  html>,, 　　& lt; html>,, 　　& lt; head>,, 　　,,,& lt; title> test,, 　　,,,& lt; meta  charset=癠TF-8"祝辞,, 　　& lt;/head>,, 　　& lt; style>,, 　　.one  {,, 　　,,,宽度:,20 px;,, 　　,,,保证金:,0,汽车,,, 　　,,,行高:,24 px;,, 　　,,,字体大小:,20 px; 　　} 　　.two  {,, 　　,,,宽度:,15 px;,, 　　,,,保证金:,0,汽车,,, 　　,,,行高:,24 px;,, 　　,,,字体大小:,20 px;,, 　　,,,自动换行:,break-word;/*英文的时候需要加上这句,自动换行*/,, 　　},, 　　& lt;/style>,, 　　& lt; body>,, 　　,,,& lt; div 类=叭嗽谖沂鞘信虐? lt;/div>,, 　　,,,& lt; div 类=皌wo"祝辞小姐:AM  ENGLISH
,, 　　& lt;/body>,, 　　& lt;/html>

2,多个句子竖向排列(如古诗)

如图:

css将横着的字竖起来的实现方法

& lt; ! DOCTYPE  html>,, 　　& lt; html>,, 　　& lt; head>,, 　　,,,& lt; title> test,, 　　,,,& lt; meta  charset=癠TF-8"祝辞,, 　　& lt;/head>,, 　　& lt; style>,, 　　.one  {,, 　　,,,保证金:,0,汽车,,, 　　,,,身高:,140 px;,, 　　,,,写入方式:,vertical-lr;/*从左向右,从右向左是,写入方式:,vertical-rl; */,, 　　,,,写入方式:,tb-lr;/* IE浏览器的从左向右,从右向左是,写入方式:,tb-rl; */,, 　　},, 　　& lt;/style>,, 　　& lt; body>,, 　　,,,& lt; div 类=叭嗽谟芭昃瘩?欲言夏口我沾衣。谁知临老相逢日,悲叹声多语笑稀。;/div>,, 　　,,,& lt; div 类=叭说淖４切〗?AM  ENGLISH
　　& lt;/body>,, 　　& lt;/html>

3,字体横行,整体竖向排版

如图:

css将横着的字竖起来的实现方法

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; title> test 　　& lt; meta  charset=癠TF-8"祝辞 　　& lt;/head> 　　& lt; style> 　　.one  { 　　保证金:150年,px 汽车; 　　宽度:200 px; 　　字体大小:20 px;, 　　行高:24 px; 　　变换:旋转(90度); 　　-ms-transform:旋转(90度),,/*,IE  9 */-moz-transform:旋转(90度),,/*,Firefox  */-webkit-transform:旋转(90度),,/*,Safari 和Chrome  */-o-transform:旋转(90度),,/*,Opera  */} 　　& lt;/style> 　　& lt; body> 　　& lt; div 类=叭嗽谟芭昃瘩? lt;/div> 　　& lt; div 类=叭说淖４荅NGLISH