How to realize vertical arrangement of text using CSS-CSS Tutorial-php.cn

How to realize vertical arrangement of text using CSS

云罗郡主

Release： 2018-11-23 17:25:13

Original

2970 people have browsed it

The content of this article is about how to use CSS to achieve vertical text arrangement. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

How to realize vertical arrangement of text using CSS

#There are two important properties in the text processing properties of the style sheet: writing-mode and text-align. Let's take a look at their usage first:

1. writing-mode (set object writing direction)

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

Parameters: lr-tb: from left to right, from top to bottom tb-rl: from top to bottom, from right to left

Example:

CSS Code Copy content to the clipboard

div { writing-mode: tb-rl; }

Copy after login

2. text-align (set the alignment of text in the object)

Syntax: text-align: left, right, center, justify

Parameters: left: Left align right: Right align center: Center justify: Align both ends

Example:

CSS Code copy content to the clipboard

div { text-align : center; }

Copy after login

And the usual layout ideas: Right The text object width setting can only arrange the width distance of the next text. If the text cannot fit two characters in one line, the text will automatically wrap, which creates the need for vertical typesetting.

CSS CodeCopy content to the clipboard

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖列排版实例 在线演示 www.divcss8.com</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

The above is a complete introduction to how to use CSS to achieve vertical text arrangement, if you want to know more aboutCSS3 tutorial , please pay attention to the PHP Chinese website.

The above is the detailed content of How to realize vertical arrangement of text using CSS. For more information, please follow other related articles on the PHP Chinese website!