css to achieve text vertical effect

htmlThe default arrangement of Chinese text is horizontal, but in some special cases, the text needs to be arranged vertically.

Single line of text arranged vertically

.onecn{
     width: 20px;  
    margin: 0 auto;  
    line-height: 24px;  
}

(Recommended tutorial: CSS Getting Started Tutorial)

.oneen{
    width: 15px;
    margin: 0 auto;
    line-height: 24px;
    font-size: 20px;
    word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
    word-break:break-all;
}

Instructions: To achieve single-line vertical arrangement of text, you only need to set the width to just enough to accommodate one font.

Vertical arrangement of multi-line text

.two{  
    margin: 0 auto;  
    height: 140px;  
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ 
    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/  
}

Note: Height is very important. If you need to control the spacing and line spacing of text, you can add the attributes letter-spacing and line-height.

Recommended related video tutorials: css video tutorial

The above is the detailed content of css to achieve text vertical effect. For more information, please follow other related articles on the PHP Chinese website!