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:

Copy code The code is as follows:

When the text here exceeds the container, it will be displayed with an ellipsis, text... text... abc666666666666666666666

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:

Copy code The code is 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:

Copy code The code is as follows:

div info: height : 30px, width : 500px, padding:10px 20px; margin:10px 5px,