Home  >  Article  >  Web Front-end  >  css to achieve text vertical effect

css to achieve text vertical effect

王林
王林forward
2020-04-18 09:08:183152browse

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

css to achieve text vertical effect

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

(Recommended tutorial: CSS Getting Started Tutorial)

css to achieve text vertical effect

.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

css to achieve text vertical effect

.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!

Statement:
This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete