当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!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: tb-lr;
}
</style>
<body>
<div class = "one" >欲话毗陵君反袂,欲言夏口我沾衣。谁知临老相逢日,悲叹声多语笑稀。</div>
<div class = "one" >I AM ENGLISH</div>
</body>
</html>
|
3、字体横行,整体竖向排版
如图:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!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);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
}
</style>
<body>
<div class = "one" >欲话毗陵君反袂</div>
<div class = "one" >ENGLISH</div>
</body>
</html>
|
以上就是css怎么把横着的字竖起来的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
css轮廓(outline)是什么
css中的单选怎么做
css怎么在文字两边加上横线
巧用css将背景图像固定在视口
css border-top-color属性怎么用
详细介绍css中的数学表达式calc()
css如何设置占位隐藏
css grid-rows属性怎么用
css怎么做个红色的心
@keyframes是什么
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css怎么把横着的字竖起来