Part four text series

1. Single-line text overflow boundaries are displayed as ellipses

#test{width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } First set the text to be displayed on a line, then truncate the overflow text with overflow:hidden, and display the truncated text as ellipsis in text-overflow:ellipsis mode.Copy the code

2. Multi-line text overflow is displayed as ellipsis??

  • Works with WebKit browsers and mobile devices
display:webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; -webkit-line-clamp is used to limit the number of lines displayed on a block element. -webkit-box: uses an object as an elastic stretchy box model. -webkit-box-orient: Sets or retrieves the arrangement of the child elements of an objectCopy the code
  • Compatible with all types of browsers
p{position: relative; line-height: 20px; max-height: 40px; overflow: hidden; } p::after{content:"..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);} max-height must be set to an integer multiple of line-heightCopy the code

2. How do I wrap consecutive long strings

Methods:#test{width:150px; word-wrap:break-word; }Word wrapbreak-word value allows line breaks within the wordCopy the code

3. Word-break :break-all; word-wrap:break-word

  • If there is a very long word at the end of the line, it will truncate it. “Warning” ends in “conra” and “tguatulation”.
  • Word-wrap :break-word example is the same as above, except that it considers all the words in the warning list as a whole. If the end of the line is not wide enough to show the whole word, it automatically puts the whole word on the next line instead of truncating the word.

4. Forbid the user to select the text

user-select:none
Copy the code

5. How do I select the check box or single box when I click on text?

> Method 1: <inputtype="checkbox" id="chk1" name="chk" /><label for="chk1"> Option one </label> <inputtype="checkbox" id="chk2" name="chk" /><label for="chk2"</label> <inputtype="radio" id="rad1" name="rad" /><label for="rad1"> Option one </label> <inputtype="radio" id="rad2" name="rad" /><label for="rad2"> Option 2 </label> All major browsers support > Method 2: <label><inputtype="checkbox" name="chk"/> Option one </label> <label><inputtype="checkbox" name="chk"/> Option two </label> <label><inputtype="radio" name="rad"/> Option one </label> <label><inputtype="radio" name="rad"/> Option 2 </label> This method is more concise than method 1, but is not supported by IE6 and earlier browsersCopy the code

6. Text (strikeout, underline, slash, thick)

Text-decoration :line-through(delete line) text-decoration:underline(underline) text-decoration:overline(underline)Copy the code

Section 5 Background

1. Give div a background image

HTML code: <div class="header">
	<div class="content-wrapper">
		<div class="content"> < P > <div > <div class= </p> <div > <div class= </p> </div> <div class="background">
		<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/5/3/16326339196077d3~tplv-t2oaga2asx-image.image" width="100%" height="100%"> </div> </div> CSS code:.header {position: relative; overflow: hidden; color:#fff;Background: RGBA (7, 17, 27, 0.5); } .content { z-index: 20; font-size: 16px; color:#fff;
}
.background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	filter: blur(10px);
}
Copy the code

Part 6 Animation

1.transition

transition-property transition-duration transition-timing-function transition-delay transition:transition-property Transition-duration transition-timing-function transition-delay Default value: all 0 ease 0Copy the code

2.animation

@keyframes animation { from{ opacity:0; } to{ opacity:1; } } animation-name animation-duration animation-timing-function ease ease-in ease-out ease-in-out linear Cubic -bezier(n,n,n,n) animation-delay animation-iteration-count The number of times the animation repeats. Animation-direction Normal The default value. The animation should play normally. Alternate animations should be played in reverse in turn. animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-directionCopy the code

3. Remove the dotted box of hyperlinks

> method: a {the outline: none; } IE7 and earlier browsers do not support the outline attribute, which requires js blur() methods such as <a onfocus="this.blur();".Copy the code

The seventh partJquery selector

  • Conversion between jquery objects and DOM objects

  • Basic selector (ID /class/tag)

  • Hierarchical selectors (all descendant elements, child elements, next sibling elements, subsequent sibling elements)

  • Filter selector (Basic filter selector, Content filter selector, Visibility filter selector, Attribute filter selector, child element filter selector, Form object filter selector, Form object attribute filter selector)

Nav li:not(:last-child) {border-right: 1px solid# 666;} + symbol: start with the second li li+liCopy the code