Web development is often used to deal with the issues related to the text, here combined with the use of the situation summed up, as well as jquery to ask the height of the problem, respectively, described as follows:
The style of text in CSS
1, Word-break:normal | Keep-all | Break-all
Sets or retrieves the way the word is handled at the container boundary, whether the word is allowed to wrap;
Normal: Browser default processing mode;
Keep-all: Encounter the container boundary, the word does not change line;
Break-all: The container boundary, the word can be changed lines, that is, the word break line display;
2, Word-wrap:normal | Break-word
Sets or retrieves whether the line breaks when the content exceeds the bounds of the specified container;
Normal: When the content exceeds the container boundary, the content can be opened or overflow the boundary of the container;
Break-word: When content is outside the container boundary, the content wraps at the container boundary;
3,white-space:normal | Pre | nowrap | Pre-wrap | Pre-line
Sets or retrieves the way in which spaces within an object are handled;
Normal: Browser default processing mode;
Pre: Do not merge blank, content more than the container boundary also does not change line;
NoWrap: Forces all text to appear in a row, merging extra white space until the text ends or a BR object is encountered;
Pre-wrap: Does not merge the blank between the text, the content has been in the boundary place to change line;
Pre-line: Does not preserve the blank between the text, the content has encountered at the boundary to change the line;
4,text-transform:none | Capitalize | Uppercase | lowercase | Full-width
Retrieves or sets the case of the text in the object;
None: Leave intact, do not convert;
Capitalize: Turn the first letter of each word into uppercase;
Uppercase: All words turn into uppercase;
Lowercase: Words all turn into lowercase;
Full-width: All text is converted into Fullwidth form, and no corresponding Fullwidth form is left intact.
5,text-overflow:clip | Ellipsis
Sets the way the retrieval text is handled beyond the container boundary;
Clip: When the content exceeds the boundary, the excess is cut;
Ellipsis: When the content is out of bounds, the excess part is represented by an ellipsis;
Note: This property needs to be set White-space=nowrap, Overflow=hidden to function, and these two attributes are placed before text-overflow;
6,text-indent: <length> | <percentage> [Hanging | | each-line]
Retrieves or sets the indentation of the text in the object;
Length: The text indents specify the value of the lengths and can be negative.
Percentage: Text Indents Specify a percentage value, which can be negative.
Hanging: Defines the indentation effect on the first line of a block container or the first line of each forced wrap, and the soft wrap is unaffected;
Each-line: Reverses all lines that are indented;
such as: P{text-indent:2em Each-line}
7,line-height:normal | <length> | <percentage> | Number
Retrieves or sets the row height of the object, which is the distance between the minimum and top of the text character;
Normal: The default allows content to be opened or a specified container;
Length: Specifies the row height with the specified number, which can be negative;
Percentage: Specifies a row height with a specified percentage, which can be negative;
Number: Specifies the row height with the product factor, which can be negative;
Example:
Copy Code code as follows:
<div style= "border:1px solid red; width:500px; White-space:nowrap; Overflow:hidden; text-overflow:ellipsis; " >
When the text goes out of the container, it displays the ellipsis, text ... text ... abc66666666666666666666666
</div>
jquery Gets the high width problem of the DOM object
The height-related methods are: Height (), outerheight (), Outerheight (True), and width-related methods include: Width (), Outerwidth (), Outerwidth (True)
If there is a id=div_id div object, then find all kinds of wide height as follows:
Copy Code code as follows:
$ ("#div_id"). Height ()/$ ("#div_id"). width (); Gets the height/width of the div itself, (not including Padding,margin,border)
$ ("#div_id"). Outerheight ()/$ ("#div_id"). Outerwidth (); Contains the height/width of the div itself, the height/width of the padding up and down, and the height/width of the border (not including the height/width of the margin)
$ ("#div_id"). Outerheight (True)/$ ("#div_id"). Outerwidth (True); Contains the height/width of the div itself, and the total height/width of the padding,border,margin up and down
Example:
Copy Code code as follows:
<div id= "Testdiv" style= margin:10px 5px; width:600px 20px ; height:60px; BORDER:2PX solid red; Font-family:arial,verdana; " >
Div info:height:30px, width:500px, padding:10px 20px; margin:10px 5px,
</div>
<input Type= "button" value= "TEST" id= "btntest" onclick= "testheight ();" />
<script type= "text/javascript" >
function Testheight () {
var obj = $ (' #testDiv ');
Alert (' obj height = ' + obj.height () + ' \nobj outerheight = ' + obj.outerheight () + ' \nobj outerheight (true) = ' + obj . Outerheight (True));
Alert (' obj width = ' + obj.width () + ' \nobj outerwidth = ' + obj.outerwidth () + ' \nobj outerwidth (true) = ' + Obj.oute Rwidth (true));
}
</script>
