How to display html text vertically

Sometimes we need a section of text to be displayed vertically from top to bottom. So what operations need to be done in CSS to make the text display vertically on the web page? Today I will answer this question for you

Sometimes we need a paragraph of text to be typed vertically from top to bottom. We know that there is a style in the CSS style that allows it to be typed vertically, but all browsers are not fully compatible. Had to give up. However, there are two ways to display text fonts vertically. Next, through knowledge explanations and practical case demonstrations, we will let you display text fonts vertically in Chinese.

Original usewriting-modeProperties-Deprecated

Syntax: writing-mode:lr-tb or writing-mode:tb-rl

Parameters:

1. lr-tb: from left to right, from top to bottom

2. tb-rl: from top to bottom, from right to left

When running the code, it is found that IE displays normally, but Firefox and Google Chrome do not support it, so it is not recommended to use the writing-mode attribute.

Understand the writing-mode of the CSS manual

Use CSS to simulate vertical text arrangement

Setting the width of the text object can only arrange the width distance of the next text, so that the text can be arranged in one line No less than two characters make the text wrap automatically, which creates a vertical typesetting requirement.

1. Complete HTML source code (including div+css code):

 
 
 
 
 
 

 
 
我是竖列排版
 
 

Description: Set a smaller width for the text DIV so that only one text can be placed in a row, so The text will automatically wrap to achieve vertical column layout.

Use to set a smaller width so that two characters cannot be displayed in one row, so that the text can wrap automatically.

Use br line break to display the text vertically

Use the html br line break tag to wrap the text. Add a line break br tag after each text to allow it to be arranged vertically.

1. Complete html code:

 
 
 
 
 
 

 
 
我
是
竖
列
排
版 
 

Use the br line break tag to realize vertical column layout of text fonts

Through the above two div css cases, let everyone learn to use css and ## The #html tag method makes the text compatible with the vertical column layout of major browsers.

html editing converter

p paragraph lines in HTML How to set high line spacing

How to use the 1aa9e5d373740b65a0cc8f0a02150c53 tag of html

The above is the detailed content of How to display html text vertically. For more information, please follow other related articles on the PHP Chinese website!