Text-related styles and jQuery object height and width issues are explained respectively_jquery

WEB development often involves issues related to text processing. Here is a summary based on the usage. There is also the issue of jQuery's object height, which are explained as follows:

1. Related texts in CSS Style of

1, word-break: normal | keep-all | break-all
Sets or retrieves how words are handled at container boundaries, whether to allow line breaks within words;
normal: The browser's default processing method;
keep-all: When the container boundary is encountered, the word will not break;
break-all: When the container boundary is encountered, the word can be broken, that is, the word will be broken and broken. ;

2, word-wrap: normal | break-word
Set or retrieve whether to break when the content exceeds the boundary of the specified container;
normal: When the content exceeds the boundary of the container, the content can be broken Open or overflow the boundary of the container;
break-word: When the content exceeds the boundary of the container, the content will wrap at the boundary of the container;

3, white-space: normal | pre | nowrap | pre-wrap | pre-line
Sets or retrieves the processing method of spaces within the object;
normal: the browser's default processing method;
pre: does not merge whitespace, and does not wrap if the content exceeds the container boundary;
nowrap: Forces all text to be displayed in one line, merging excess whitespace until the end of the text or encountering the br object;
pre-wrap: Do not merge the whitespace between texts, and wrap when the content is large;
pre- line: Do not retain the white space between texts, and line breaks are encountered when the content is long;

4, text-transform: none | capitalize | uppercase | lowercase | full-width
Retrieve or set the text in the object capitalize;
none: Leave it as it is, no conversion;
capitalize: Convert the first letter of each word to uppercase;
uppercase: Convert all words to uppercase;
lowercase: Convert all words to lowercase ;
full-width: All text is converted to fullwidth form, and if there is no corresponding fullwidth form, it is left intact.

5, text-overflow: clip | ellipsis
Set the processing method when the retrieved text exceeds the boundary of the container;
clip: When the content exceeds the boundary, the excess part is clipped;
ellipsis : When the content exceeds the boundary, the excess part is represented by an ellipsis;
Note: This attribute needs to be set with white-space=nowrap, overflow=hidden to work, and these two attributes are placed before text-overflow;

6, text-indent: | [ hanging || each-line ]
Retrieve or set the indent of the text in the object;
length: The text indent specifies the length value, which can be negative.
percentage: text indentation specifies the percentage value, which can be negative.

hanging: Define the indentation effect on the first line of the block container or the first line of each forced line break inside, soft line breaks are not affected;
each-line: Reverse all indented effects line;
such as: p{text-indent:2em each-line}

7,line-height: normal | | | number
retrieve or set The line height of the object, that is, the distance from the lowest to the top of the text characters;
normal: By default, the content is allowed to open or exit the specified container;
length: Use the specified value to specify the line height, which can be a negative number ;
percentage: Specify the row height with the specified percentage, which can be a negative number;
number: specify the row height with the product factor, which can be a negative number;

Example: