豎排,別再調盒子寬度來讓文字換行實現豎排!!
也別再用<br> + line-height,看着難受!!
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
=====================================額外用例!
1.一些圖標也不必更換樣式后引入,當然css3的rotate也是可以的,對於圖標
/* css */
1 .icon-play { 2 font-family: 'icomoon'; 3 } 4 5 .verticle-mode { 6 writing-mode: tb-rl; 7 -webkit-writing-mode: vertical-rl; 8 writing-mode: vertical-rl; 9 *writing-mode: tb-rl; 10 }
<!-- html --> 1 <p><strong>默認流</strong></p> 2 <span class="icon-play">r</span> 箭頭朝右 3 <p><strong>垂直流</strong></p> 4 <span class="icon-play verticle-mode">r</span> 箭頭朝下
樣式顯示為:
2.表格form中可以一起使用,目前還沒有用到過
====================================
最后:這些原IE早期私有屬性,不要再使用,以上均可對應替代
更多內容,見:
http://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode