How to display html text vertically-HTML Tutorial-php.cn

How to display html text vertically

php中世界最好的语言

Release： 2017-11-23 15:41:07

Original

18184 people have browsed it

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-mode Properties-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):

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>竖列排版实例 </title> 
<style> 
body{text-align:center} 
.shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid #333} 
</style> 
</head> 
<body> 
<div class="shuli">我是竖列排版</div> 
</body> 
</html>

Copy after login

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:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>竖列排版实例 在线演示 </title> 
<style> 
body{text-align:center; line-height:22px} 
/* CSS注释说明：设置css文字居中，css行高为22px间隔 */ 
</style> 
</head> 
<body> 
我<br>是<br>竖<br>列<br>排<br>版 
</body> 
</html>

Copy after login

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.

Through the above cases, I believe everyone is already familiar with vertical column layout. For more exciting information, please pay attention to other related articles on the PHP Chinese website!