縦書きテキスト、英語垂直

縦長、縦達成するために、テキストの折り返しを作るために、ボックスの幅を調整しないでください!

   また<BR> +行の高さを使用しないでください、不快に見えました!

 

書き込みモード:水平-TB | 垂直-RL | 垂直-LR | 横-RL | 横-LR

 

 

   

 

=====================================追加のユースケース!

1.一部のアイコンは、スタイルの導入後に交換する必要はありません、もちろん、CSS3の回転はアイコンのため、も可能です

 

 
 
/ * 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

おすすめ

転載: www.cnblogs.com/vaso-me/p/11359540.html