您好,登錄后才能下訂單哦!
這篇文章主要講解了“css如何實現文字橫排”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“css如何實現文字橫排”吧!
css實現文字橫排的方法:首先創(chuàng)建一個HTML示例文件;然后創(chuàng)建p標簽;最后通過“writing-mode: horizontal-tb;”屬性實現文字橫排即可。
本文操作環(huán)境:windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。
css怎么實現文字橫排?
css實現文字橫向排列/豎向排列writing-mode:書寫模式
屬性值 | 效果 |
---|---|
horizontal-tb | 橫向排列 |
vertical-rl | 豎向排列,從右到左 |
vertical-lr | 豎向排列,從左到右 |
舉例如下:
html:
<p class="textBox"> <h2>horizontal-tb:橫向排列</h2> <h2>vertical-rl:縱向排列,從右到左</h2> <h2>vertical-lr:縱向排列,從左到右</h2></p>
css:
<style> .textBox h2{ width: 200px; height: 200px; margin: 10px 10px; padding: 10px; float: left; } .textBox h2:nth-of-type(1){ writing-mode: horizontal-tb; background-color: #42b983; } .textBox h2:nth-of-type(2){ writing-mode: vertical-rl; background-color: #42a8b9; } .textBox h2:nth-of-type(3){ writing-mode: vertical-lr; background-color: #81b9aa; } </style>
實現效果:
感謝各位的閱讀,以上就是“css如何實現文字橫排”的內容了,經過本文的學習后,相信大家對css如何實現文字橫排這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。