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

This article mainly introduces "how to use css to achieve the first line indentation function" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "how to use css to achieve the first line indentation function" article can help you solve the problem.

When many friends use html to write paragraphs, they always feel uncomfortable in reading. Because one of our writing habits is like this: there are two spaces at the beginning of a paragraph. However, there are no such rules for html code by default. At this point, some friends may tactfully use spaces to achieve this effect, but in fact, the html first line indentation attribute is provided in css.

Indent using space characters

How to type html blanks? The use of HTML spaces is described in detail in this article. We can use four spaces to achieve the effect of indentation on the first line.

It's a long story.

This is the other end of the story. It's a long story.

There are two problems in using this method: first, the newline character is difficult to type and difficult to remember; second, the space of the newline is difficult to control (the number of spaces corresponding to a Chinese character is different in the case of different font sizes, the above code uses four spaces, only the position of one character is empty (about, not accurate).

Let spaces not merge to use space indentation

Html can directly use spaces to achieve the space effect, but multiple spaces will be merged into a single space, using white-space: pre; to prevent spaces from merging.

It's a long story.

This is the other end of the story. It's a long story.

Using this method solves the difficult problem of the previous method, but the problem of space length is still not solved.

Cooperate with the use of pseudo-classes

Whether it is the first method or the second method, there is a problem: sometimes there are more or less spaces in the html code, which will make the page unattractive. This can be extended on the basis of method 2, using: before pseudo-elements in front of each p element (editor here uses the class selector to select. Otherwise, all p elements will have this effect and lose control) insert spaces to achieve the effect of indentation in front of the paragraph.

.indent: before {content: "; white-space: pre;} this is a long paragraph.

This is the other end of the story. It's a long story.

This approach has solved most of the problems, but in the end it leaves the problem of width.

Indent using the first line attribute

In fact, css provides the first line indentation attribute, as long as the text-indent is set to a value, you can achieve the effect of the first line indentation. The most commonly used value is in em, where 2em represents twice the current font size. In the case of 16px, 2em is 32px, that is, the distance between two characters.

It's a long story.

This is the other end of the story. It's a long story.

Using this method can solve the indentation problem perfectly and is the optimal solution of the indentation scheme (although this property is generally written in a separate css to facilitate invocation as a special style rather than an interline style, which is shown here).

This is the end of the content about "how to use css to achieve the first line indentation function". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.