Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >css如何设置竖排文字
css如何设置竖排文字
- 藏色散人asal
- 2021-05-27 11:03:1213187semak imbas
css设置竖排文字的方法：1、通过“word-wrap: break-word;”等属性实现单个竖排文字；2、通过“writing-mode: tb-lr”等属性实现多行竖排文字；3、通过“rotate(90deg);”实现整体竖向排版。
本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑
CSS几种简单方法实现文字竖向排版
下面介绍几种使用Css实现文字竖向排版的方法：
1.一个句子的竖向排列
如图：
<!DOCTYPE html> <html> <head>
<title>test</title>
<meta charset="UTF-8"> </head> <style> .one {
width: 20px;
margin: 0 auto;
line-height: 24px;
font-size: 20px;}.two {
width: 15px;
margin: 0 auto;
line-height: 24px;
font-size: 20px;
word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/ } </style> <body>
<p class="one">我是竖列排版</p>
<p class="two">I AM ENGLISH</p> </body> </html>
2.多个句子竖向排列（如古诗）
如图：
<!DOCTYPE html> <html> <head>
<title>test</title>
<meta charset="UTF-8"> </head> <style> .one {
margin: 0 auto;
height: 140px;
writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/
writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/ } </style> <body>
<p class="one">欲话毗陵君反袂，欲言夏口我沾衣。谁知临老相逢日，悲叹声多语笑稀。</p>
<p class="one">I AM ENGLISH</p></body> </html>
3.字体横行，整体竖向排版
如图：
<!DOCTYPE html><html><head>
<title>test</title>
<meta charset="UTF-8"></head><style>.one {
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 */}</style><body>
<p class="one">欲话毗陵君反袂</p>
<p class="one">ENGLISH</p></body></html>
推荐学习：《css视频教程》
Atas ialah kandungan terperinci css如何设置竖排文字. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html post乱码怎么办Artikel seterusnya：css删除线颜色怎么设置