Home > Article > Web Front-end > How to realize vertical arrangement of text using CSS

How to realize vertical arrangement of text using CSS

云罗郡主Original: 2018-11-23 17:25:132936browse

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.

#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; }

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; }

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What are the uses of CSS3’s :out-of-range and :in-range pseudo-classes? (code example)Next article：What are the uses of CSS3’s :out-of-range and :in-range pseudo-classes? (code example)

See more

How to realize vertical arrangement of text using CSS

Related articles