碼上快樂

相關內容    簡體    繁體

CSS幾種簡單方法實現文字豎向排版

本文轉載自   查看原文   2018-03-15 17:23   2420 

1.一個句子的豎向排列

如圖：

1.                      2. 

[html]  view plain  copy
 
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <title>test</title>    
  5.     <meta charset="UTF-8">    
  6. </head>    
  7. <style>    
  8. .one {    
  9.     width: 20px;    
  10.     margin: 0 auto;    
  11.     line-height: 24px;    
  12.     font-size: 20px;  
  13. }  
  14. .two {    
  15.     width: 15px;    
  16.     margin: 0 auto;    
  17.     line-height: 24px;    
  18.     font-size: 20px;    
  19.     word-wrap: break-word;/*英文的時候需要加上這句，自動換行*/    
  20. }    
  21. </style>    
  22. <body>    
  23.     <div class="one">我是豎列排版</div>    
  24.     <div class="two">I AM ENGLISH</div>    
  25. </body>    
  26. </html>    


2.多個句子豎向排列（如古詩）

 

如圖：

1.   2. 3.

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <title>test</title>    
  5.     <meta charset="UTF-8">    
  6. </head>    
  7. <style>    
  8. .one {    
  9.     margin: 0 auto;    
  10.     height: 140px;    
  11.     writing-mode: vertical-lr;/*從左向右 從右向左是 writing-mode: vertical-rl;*/    
  12.     writing-mode: tb-lr;/*IE瀏覽器的從左向右 從右向左是 writing-mode: tb-rl；*/    
  13. }    
  14. </style>    
  15. <body>    
  16.     <div class="one">欲話毗陵君反袂，欲言夏口我沾衣。誰知臨老相逢日，悲嘆聲多語笑稀。</div>    
  17.     <div class="one">I AM ENGLISH</div>  
  18. </body>    
  19. </html>   


 


3.字體橫行，整體豎向排版

 

如圖：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>test</title>  
  5.     <meta charset="UTF-8">  
  6. </head>  
  7. <style>  
  8. .one {  
  9.     margin: 150px auto;  
  10.     width: 200px;  
  11.     font-size: 20px;   
  12.     line-height: 24px;  
  13.     transform:rotate(90deg);  
  14.     -ms-transform:rotate(90deg);    /* IE 9 */  
  15.     -moz-transform:rotate(90deg);   /* Firefox */  
  16.     -webkit-transform:rotate(90deg); /* Safari 和 Chrome */  
  17.     -o-transform:rotate(90deg);     /* Opera */  
  18. }  
  19. </style>  
  20. <body>  
  21.     <div class="one">欲話毗陵君反袂</div>  
  22.     <div class="one">ENGLISH</div>  
  23. </body>  
  24. </html>  
共勉

 

版權聲明：本文為博主原創文章，未經博主允許不得轉載。 http://blog.csdn.net/sangjinchao/article/details/60139706
 
http://blog.csdn.net/sangjinchao/article/details/60139706


免責聲明！

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



猜您在找 CSS幾種簡單方法實現文字豎向排版 CSS實現文字豎排排版 css-文字和圖片在容器內垂直居中的簡單方法 css-文字和圖片在容器內垂直居中的簡單方法 CSS文字排版 css文字與排版 css實現豎向步驟條 純css實現div三列等高布局的最簡單方法簡化版/也可以多列 C# 導出Excel的幾種簡單方法 CSS實現文字豎排 DIV CSS文字垂直豎列排版顯示如何實現？
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM