项目空间文档集
记录散人IT技术管理经营学习使用研究,探索,总结,生活感悟
多个句子竖向排列
文章摘要: !DOCTYPE html html lang=zh-cmn-Hans head meta charset=utf-8 / titlewriting-mode_CSS参考手册_web前端开发参考手册系列/title meta name=author content=Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com / style .test{width:100px;height:100px;mar
时间:2020-05-01 09:09来源:未知 作者:admin 点击: 次
文章TAG:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>writing-mode_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test{width:100px;height:100px;margin:10px;border:1px solid #aaa;}
.lr-tb{-webkit-writing-mode:horizontal-tb;writing-mode:lr-tb;writing-mode:horizontal-tb;}
.tb-rl{-webkit-writing-mode:vertical-rl;writing-mode:tb-rl;writing-mode:vertical-rl;}
.tb-lr{-webkit-writing-mode:vertical-lr;writing-mode:tb-rl;writing-mode:vertical-lr;}
</style>
</head>
<body>
<div class="test lr-tb">本段文字将按照水平从左到右的书写方向进行流动。</div>
<div class="test tb-rl">本段文字将按照垂直从右到左的书写方向进行流动。</div>
<div class="test tb-lr">本段文字将按照垂直从左到右的书写方向进行流动。</div>
<ul class="tb-rl">
<li class="test">本段文字将按照垂直从右到左的书写方向进行流动。</li>
<li class="test">本段文字将按照垂直从右到左的书写方向进行流动。</li>
</ul>
<ul class="tb-lr">
<li class="test">本段文字将按照垂直从左到右的书写方向进行流动。</li>
<li class="test">本段文字将按照垂直从左到右的书写方向进行流动。</li>
</ul>
</body>
</html>
1.一个句子的竖向排列
如图：
1. 2.
<!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>
<div class="one">我是竖列排版</div>
<div class="two">I AM ENGLISH</div>
</body>
</html>
2.多个句子竖向排列（如古诗）
如图：
1. 2. 3.
<!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>
<div class="one">欲话毗陵君反袂，欲言夏口我沾衣。谁知临老相逢日，悲叹声多语笑稀。</div>
<div class="one">I AM ENGLISH</div>
</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>
<div class="one">欲话毗陵君反袂</div>
<div class="one">ENGLISH</div>
</body>
</html>
共勉
————————————————
版权声明：本文为CSDN博主「sangjinchao」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sangjinchao/article/details/60139706
本段文字将按照水平从左到右的书写方向进行流动。
本段文字将按照垂直从右到左的书写方向进行流动。
本段文字将按照垂直从左到右的书写方向进行流动。
- 本段文字将按照垂直从右到左的书写方向进行流动。
- 本段文字将按照垂直从右到左的书写方向进行流动。
- 本段文字将按照垂直从左到右的书写方向进行流动。
- 本段文字将按照垂直从左到右的书写方向进行流动。
|
|