This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge

preface

Do not know to know the meaning that this website represents above! On December 20, 1990, Berners-Lee launched the world’s first website: info.cern.ch/ containing information about the birth of the website and… Berners-lee is seen as its founder.

At first glance, what do we see? That’s right, words.

text-align

define

The text-align attribute is used to align the inside of a block-level element, where the content is used instead of the text. As you can see from the name, the text-align attribute definitely affects the alignment of the text, and it also affects inline/inline/block-level elements

The inline div has display:inline-block;

value

Left Arranges text to the left. Default value: Determined by the browser.

Arrange the text to the right.

Center aligns the text in the middle.

Justify aligns text on both ends.

Inherit specifies that the value of the text-align attribute should be inherited from the parent element.

Here I will focus on the property of “justify”, which should be unfamiliar to most people.

For the following div, we do not set the text-align property. As shown in the figure, the first and second lines are not aligned.

.textAlign { width: 200px; height: 200px; background-color: #2ecc71; } <div class="textAlign"> <span> <span>Copy the code

When you add “text align:justify” to. TextAlign, the result is as follows: the first line is aligned with the end of the second line.

Love is the direction of

Why is this property mentioned?! This is exactly what direction does. It defaults to LTR, so the text is displayed from left to right, but when you set it to RTL, it’s displayed from right to left.

.textAlign { direction: rtl; } < span > direction: RTL. </span>Copy the code

Pay attention to the position of the period.

If the direction property is LTR, the default value is left; If the direction attribute is RTL, the default value is right.Copy the code

text-align-last

define

Allows you to control the alignment of the last (or unique) line of text before forcing a newline – for example, at the end of a paragraph or the line before a tag.

Left aligns the last line of text to the left of the container.

Right aligns the last line of text to the right of the container.

Center centers the last line of text in the container.

Justify aligns the last line of text so that it spans the entire width of the container, inserting Spaces between words to increase line lines if needed.

Start Aligns the text with the “start” of the line according to the text. Direction-aligns the text left for LTR and right for RTL.

End Aligns the last line with the “end” of the line according to direction text -direction: LTR is right, direction: RTL language is left.

Auto Default value. Aligns the last line of text to match the element’s text-align attribute (if set). If not set, auto aligns the text with the beginning.

 #auto {
      text-align: right;;
      text-align-last: auto;
    }
Copy the code

Inherit applies the attributes of the text-align-last parent element.

text-indent

define

The text-indent attribute specifies how much horizontally spaced text should be moved before the first line of the element’s text content begins. Spacing is calculated from the starting edge of a block-level container element. This attribute is invalid for inline elements.

The starting edge is usually on the left, but can also be on the right if in right-to-left mode, such as the direction attribute.

The text-indent attribute is inherited when specified on a block element, which means that it also affects the descendants of an in-line block. When working with inline block children, you might want to force them to use text-indent: 0; .

grammar

text-indent: | | inherit && [ hanging || each-line ]

Among them

Each -line is an experimental API that should not be used in production code. Indentation affects the first line of a block container and every line after a forced newline, but does not affect lines after a flexible wrap newline.

The Hanging experimental API should not be used in production code. Invert indented lines. All lines except the first will be indented.

p {
  text-indent: *em;
}
Copy the code