Home >Web Front-end >JS Tutorial >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:
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 |
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:
2. The problem of jQuery obtaining the height and width of the DOM object
The height-related methods are: height(), outerHeight(), outerHeight(true), and the width-related methods are: : width(), outerWidth(), outerWidth(true)
If there is a div object with id=div_id, then the various widths and heights are calculated as follows:
$("#div_id").height() / $("#div_id").width(); / / What is obtained is the height/width of the div itself, (excluding padding, margin, border)
$("#div_id").outerHeight() / $("#div_id").outerWidth(); // Contains the height/width of the div itself, the top and bottom height/width of the padding, and the top and bottom height/width of the border (excluding the height/width of the margin)
$("#div_id").outerHeight(true) / $( "#div_id").outerWidth(true); // Contains the height/width of the div itself, as well as the total height/width of padding, border, and margin
Example:
div info: height : 30px, width : 500px, padding:10px 20px; margin:10px 5px,