• CSS几种简单方法实现文字竖向排版

    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.      20px;    
    10.     margin: 0 auto;    
    11.     line-height: 24px;    
    12.     font-size: 20px;  
    13. }  
    14. .two {    
    15.      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.      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
  • 相关阅读:
    李宏毅 Keras手写数字集识别（优化篇）
    李宏毅 Keras2.0演示
    李宏毅 线性回归预测PM2.5
    李宏毅 Gradient Descent Demo 代码讲解
    Pandas导入导出&pickle文件模块
    python(29)Tinker+BeautifulSoup+Request抓取美女壁纸
    golang(11) 反射用法详解
    golang(10)interface应用和复习
    golang(09) golang 接口内部实现
    golang(08)接口介绍
  • 原文地址：https://www.cnblogs.com/rswl/p/8574802.html
Copyright © 2020-2023  润新知