WEB development is often used to solve the problems related to this Article. Here, we will summarize the usage and solve the problem of jQuery's object height, next, let's take a look at some of the issues related to document processing in WEB development. Here, we will summarize the usage cases and find out the height of jQuery's object, which are described as follows:
I. CSS text styles
1, word-break: normal | keep-all | break-all
Sets or retrieves the processing method of a word at the container boundary and determines whether line breaks are allowed;
Normal: the default browser processing method;
Keep-all: when a container boundary is encountered, the word does not wrap;
Break-all: when a container boundary is encountered, a line break is allowed within the word, that is, the line break is displayed;
2, word-wrap: normal | break-word
Sets or retrieves whether the row is broken when the content exceeds the boundary of the specified container;
Normal: when the content exceeds the container boundary, the content can expand or overflow the container boundary;
Break-word: when the content exceeds the container boundary, the content will wrap at the container boundary;
3, white-space: normal | pre | nowrap | pre-wrap | pre-line
Sets or retrieves the processing method of spaces in an object;
Normal: the default browser processing method;
Pre: Do not merge blank content. If the content exceeds the container boundary, it does not wrap;
Nowrap: forces all texts to be displayed in a row, and merges unnecessary spaces until the text ends or a br object is encountered;
Pre-wrap;
Pre-line: the blank text is not retained, and a line break is triggered when there are many contents;
4, text-transform: none | capitalize | uppercase | lowercase | full-width
Retrieves or sets the case sensitivity of text in an object;
None: reserved as is, not converted;
Capitalize: the first letter of each word is capitalized;
Uppercase: converts all words to uppercase;
Lowercase: converts all words to lowercase letters;
Full-width: all text is converted to the fullwidth format. If there is no corresponding fullwidth format, it is retained as is.
5, text-overflow: clip | ellipsis
Sets the processing method for retrieving text that exceeds the container boundary;
Clip: when the content exceeds the boundary, the excess part is cut;
Ellipsis: when the content exceeds the boundary, the excess part is expressed by a ellipsis;
Note: This attribute must be set to white-space = nowrap and overflow = hidden, and these two attributes are placed before text-overflow;
6, text-indent: | [Hanging | each-line]
Retrieves or sets the indentation of text in an object;
Length: Specifies the length of the text indent, which can be a negative value.
Percentage: Specifies the percentage value for text indent, which can be a negative value.
Hanging: defines the indentation to act on the first line or the first line of each forced line feed inside the block container. Soft line breaks are not affected;
Each-line: reverse all indented rows;
For example: p {text-indent: 2em each-line}
7, line-height: normal | | | Number
Retrieves or sets the Row Height of an object, that is, the distance from the lowest to the highest of the text characters;
Normal: by default, the specified container is allowed to be opened or output;
Length: Specifies the Row Height with a specified value, which can be negative;
Percentage: Specifies the Row Height with a specified percentage, which can be negative;
Number: use the product factor to specify the Row Height, which can be negative;
Example:
The Code is as follows:
When the text exceeds the container, the ellipsis is displayed. text... abc66666666666666666666666
Ii. High width of DOM objects obtained by jQuery
Height-related methods include: height (), outerHeight (), outerHeight (true), width-related methods include: width (), outerWidth (), outerWidth (true)
If there is a p object with id = p_id, find the various width and height as follows:
The Code is as follows:
$ ("# P_id "). height ()/$ ("# p_id "). width (); // obtain the height/width of the p itself (excluding padding, margin, border)
$ ("# P_id "). outerHeight ()/$ ("# p_id "). outerWidth (); // contains the height/width of the p, the height/width of the padding, and the height/width of the border (excluding the height/width of the margin)
$ ("# P_id "). outerHeight (true)/$ ("# p_id "). outerWidth (true); // contains the height/width of the p, and the total height/width of the padding, border, and margin
Example:
The Code is as follows:
P info: height: 30px, width: 500px, padding: 10px 20px; margin: 10px 5px,
