Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve paragraph typesetting in css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Paragraph typesetting

Indent

The paragraph in Chinese text is used to the blank space between two words. This special style can be implemented with the following code:

P {text-indent:2em;}

Note: 2em means twice the size of a text.

Row spacing (row height)

In this section, let's learn about another line spacing (line height) attribute (line-height) that plays an important role in paragraph typesetting. The following code sets the paragraph spacing to 1.5 times.

P {line-height:1.5em;}

Chinese character spacing, letter spacing

If you want to set text spacing or letter spacing in web layout, you can use letter-spacing, such as the following code:

H2 {letter-spacing:50px;}

Note: when this style is used in English words, it sets the spacing between letters.

What if I want to set the spacing between English words? You can use word-spacing to do this. The code is as follows:

H2 {word-spacing:50px;}... Welcome to imooc!

Alignment

Do you want to center the text and pictures in the block elements? You can use the text-align style code, as shown in the following code to center the text.

H2 {text-align:center;} the great Gatsby

You can also set it to the left:

H2 {text-align:left;} the great Gatsby

You can also set it to the right:

H2 {text-align:right;} the great Gatsby

Surrounded by picture and text

There is a common image-text surround effect in css. The main way to achieve this is to float the picture on the left or right through the float tag. The adjacent text will be arranged around the picture, the code and effect are as follows:

Vertical text

Use writing-mode to implement. The writing-mode property has two values, lr-tb, which are the default left-right, top-bottom, and tb-rl, which are top-bottom and right-left.

For example:

P {writing-mode: tb-rl;}

Can be combined with direction typesetting.

The sinking of the first word

Pseudo-object: first-letter combined with font-size and float can create the drop caption effect.

For example:

P:first-letter {padding: 6px; font-size: 32pt; float: left;}

Chinese phonetic alphabet

If we want to pronounce Chinese characters, we can use ruby tags and ruby-align attributes, such as:

Bopomofo zhuyin

Then set its alignment through ruby-align.

This is the end of the article on "how to achieve paragraph typesetting in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.