CSS error-prone parts properties

Text:

1. Text-indent is used to define the indentation of the first content row in a block-level element .

2. The White-space property sets how to handle whitespace within an element.

value	Description
Normal	Default. The blank will be ignored by the browser.
Or:	The blank will be reserved by the browser. It behaves like a <pre> tag in HTML.
NoWrap	The text does not wrap, and the text continues on the same line until the <br> tag is encountered.
Pre-wrap	Preserves the sequence of whitespace characters, but wraps them normally.
Pre-line	Merges a sequence of whitespace characters, but preserves newline characters.
Inherit	Specifies that the value of the White-space property should be inherited from the parent element.

3. The Word-wrap Normal|break-word property allows long words or URL addresses to wrap to the next line.

(The browser default long word line does not fit automatically run the next line, if the next line is also very long overflow browser, you need this property to prevent overflow)

4. The Word-break attribute stipulates that the processing method of non-Chinese-Japanese-Korean text automatic line wrapping.

Note: Word-wrap is used to decide whether to allow words within the word segmentation, if not allowed long words will overflow. The most important thing is that it will try to move to the next line first, to see if the next line is too wide enough for the words to be segmented within. And Word-break:break-all is more abnormal, because it is very rude in the way of segmentation, it will not try to move the long word to the next line, but directly to the words within the segmentation. This can also explain why it is decided to use the method of segmentation, that is-with the word-break:break-all, it is tantamount to using the rough way to the segmentation. In a word, if you want to save space, then use Word-break:break-all on the right! The common point is that the long words can be forcibly segmented, the difference is that Word-wrap:break-word will first start a new line to place long words, the new line or not put the long word will be a long word forced segmentation; Word-break: Break-all will not put long words in a new line, when this line can not put the time to directly force the segmentation. (Quoted from http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html)

5. The Text-overflow property specifies what happens when the text overflows the containing element.

Description: When the block container overflow is not visible, the definition inline content overflows whether its block container is truncated or added (...). and custom characters to make the Text-overflow property effective, the block container must explicitly define overflow as a non-visible value, while explicitly or implicitly defining width as a non-auto value, White-space to nowrap value.

Clip trim text. Ellipsis displays the ellipsis to represent the trimmed text. String uses the given string to represent the trimmed text.

4, the Vertial-align Reference manual explanation will not post. Go straight to the talking mode: popularize basic knowledge first

Row height: The distance between the baseline of the line of text. Line spacing (Leading): The difference between row height and font size.

Baseline (base line): Refers to a line of horizontal current along the basis of lines, the baseline is not the bottom edge of Chinese characters, but the lower edge of the English letter x.

Line box: The difference between the calculated values of Line-height and Font-size (which becomes "line spacing" in CSS) is divided into two halves, which are added to the top and bottom of a text line content. The smallest box that can contain the content is the row box.

The midline is defined as: The midline is at the top of the baseline, and the distance from the baseline is half of the lowercase x height (that is, ex), whereas ex is associated with the font size, and the majority of browsers think 1ex = 0.5em, so that the baseline above One-fourth em is aligned as the midline.

Row heights are inheritable, but inherited values are calculated because they inherit computed values, so when the text font size within the element is different, setting a fixed row height is likely to cause the font to overlap. Therefore, you can define a real value without a unit as a scaling factor to uniformly control the row height, and the scaling factor is inherited directly rather than inheriting the computed value. (Quoted from http://www.ddcat.net/blog/?p=227)

Vertical-align applies to inline element and cell (Table-cell) element attribute values:

The top alignment (vertical-align:top) aligns the top of the inline box of an element with the top of the row box.

The text top alignment (vertical-align:text-top) aligns the top line of the text line with the top of the element's inline box.

Middle Alignment (Vertical-align:middle) is typically used on the picture to align the centerline of the vertical direction of the picture with the midline of the line of text.

Superscript (vertical-align:super) causes the baseline of an element (the bottom of the replacement element) to rise relative to the baseline of the parent element.

The subscript (vertical-align:sub) lowers the baseline of the element, and the moving amplitude is not specified in the CSS specification, which is determined by the browser.

CSS error-prone parts properties