文字豎排,英文豎排


豎排,別再調盒子寬度來讓文字換行實現豎排!!

   也別再用<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> 箭頭朝下

樣式顯示為:

 

 CSS writing-mode實現全兼容icon fonts圖標旋轉實例頁面

 

2.表格form中可以一起使用,目前還沒有用到過

====================================

最后:這些原IE早期私有屬性,不要再使用,以上均可對應替代

更多內容,見:

http://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode

https://drafts.csswg.org/css-writing-modes-3/#block-flow


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM