Home > Article > Web Front-end > How to display html text vertically
How to display html text vertically
- php中世界最好的语言Original
- 2017-11-23 15:41:0718210browse
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):
<!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>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>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! Related reading: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!