1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 【笔记】css实现文字横向排列/竖向排列

【笔记】css实现文字横向排列/竖向排列

时间:2019-02-02 10:07:26

相关推荐

【笔记】css实现文字横向排列/竖向排列

writing-mode:书写模式

举例如下:

html:

<div class="textBox"><h1>horizontal-tb:横向排列</h1><h1>vertical-rl:纵向排列,从右到左</h1><h1>vertical-lr:纵向排列,从左到右</h1></div>

css:

<style>.textBox h1{width: 200px;height: 200px;margin: 10px 10px;padding: 10px;float: left;}.textBox h1:nth-of-type(1){writing-mode: horizontal-tb;background-color: #42b983;}.textBox h1:nth-of-type(2){writing-mode: vertical-rl;background-color: #42a8b9;}.textBox h1:nth-of-type(3){writing-mode: vertical-lr;background-color: #81b9aa;}</style>

实现效果:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。