css實作文字橫排的方法:先建立一個HTML範例檔案;然後建立p標籤;最後透過「writing-mode: horizontal-tb;」屬性實作文字橫排即可。
本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。
css怎麼實作文字橫排?
css實作文字橫向排列/垂直排列
#writing-mode:書寫模式
#屬性值 | |
---|---|
##horizontal-tb | 橫向排列 |
#vertical-rl | #豎向排列,從右到左 |
vertical-lr | 豎向排列,從左到右 |
# 舉例如下:
html:
<p class="textBox"> <h1>horizontal-tb:横向排列</h1> <h1>vertical-rl:纵向排列,从右到左</h1> <h1>vertical-lr:纵向排列,从左到右</h1></p>
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>
實作效果:
推薦學習:《css影片教學》
#以上是css怎麼實現文字橫排的詳細內容。更多資訊請關注PHP中文網其他相關文章!