超小白法

将需要竖排显示的字符单独放在一个div或p等标签中，或放在span中然后在CSS中设置display属性为block实现竖排。

使用css

1
2
3
4
5
6
7
<h1> NETTUTS </h1> 

<div class="tow">欲话毗陵君反袂</div>
<div class="tow">ENGLISH</div>

<div class="one">欲话毗陵君反袂，欲言夏口我沾衣。谁知临老相逢日，悲叹声多语笑稀。</div>  
<div class="one">I AM ENGLISH</div>

单句话竖向排列 (浏览器兼容性最好)

在需要竖向显示的地方，强制定义显示区域的宽度，然后加宽字符间距这样字符会自动竖向排列

1
2
3
4
5
6
h1 { 
width: 50px;
font-size: 50px; 
word-wrap: break-word; /*英文的时候需要加上这句，自动换行,中文不需要，且浏览器兼容更好*/  
letter-spacing: 20px;  /*用于控制字符间距*/ 
}

多个句子竖向排列（如古诗）

1
2
3
4
5
6
.one {  
    margin: 0 auto;  
    height: 140px;  
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/  
    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/  
}

字体横行，整体竖向排版）

1
2
3
4
5
6
7
8
9
10
11
.tow {  
    margin: 150px auto;
	width: 200px;
	font-size: 20px; 
	line-height: 24px;
	transform:rotate(90deg);
	-ms-transform:rotate(90deg); 	/* IE 9 */
	-moz-transform:rotate(90deg); 	/* Firefox */
	-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
	-o-transform:rotate(90deg); 	/* Opera */
}

使用js

1
2
var h1 = document.getElementsByTagName(‘h1′)[0]; 
h1.innerHTML = ‘<span>’ + h1.innerHTML.split(”).join(‘</span><span>’) + ‘</span>’;
1
2
3
<style> 
h1 span { display: block; } 
</style>

此种方法与使用原理是一样的，好处是用js代替手工添加span标签。尽管如此，还是有一些弊端：
a、当js失效的时候，会影响页面布局；
b、当然完美的解决方法是，尽可能用css;

参考来源：
CSS writing-mode 属性
彻底搞懂word-break、word-wrap、white-space
4种方法实现文字竖向排列
CSS几种简单方法实现文字竖向排版

最后更新： 2019年10月13日 22:13

原始链接： http://ldc5886.github.io/2019/07/04/%E6%96%87%E5%AD%97%E7%AB%96%E5%90%91%E6%8E%92%E5%88%97/

赏
× 请我吃糖~
打赏二维码