26 common and forgettable CSS tips

Collection of common but forgetful CSS implementation methods, if there are omissions or supplements, also please correct!

1. Resolve inline-block element setting overflow:hidden property causing adjacent row elements to be offset downward

.wrap {
  display: inline-block;
  overflow: hidden
	vertical-align: bottom
}
Copy the code

2. The part beyond shows ellipsis

// Single line of text
.wrap {
	overflow:hidden;/* Beyond part hidden */
	text-overflow:ellipsis;/* Displays ellipsis */ for the part beyond
	white-space:nowrap;/* Specifies that the text in a paragraph is not wrapped */
}
// Multi-line text
.wrap {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;   // Display the object as an elastic flex box model * attributes that must be combined *
    -webkit-box-orient: vertical;   // Sets the arrangement of the child elements of the flex box object * attributes that must be combined *
    -webkit-line-clamp: 3;   // Used to limit the number of lines of text to be displayed in a block element
    word-break: break-all;   // Let the browser implement line breaks in any position *break-all to allow line breaks within words *
}
Copy the code

3. The CSS implements non-newline, automatic newline, and forced newline

/ / not a newline
.wrap {
  white-space:nowrap;
}
// wrap
.wrap {
  word-wrap: break-word;
  word-break: normal;
}
// Force a line break
.wrap {
  word-break:break-all;
}
Copy the code

4. The CSS enables text alignment at both ends

.wrap {
    text-align: justify;
    text-justify: distribute-all-lines;  //ie6-8
    text-align-last: justify;  // The alignment of the last line of a block or row
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}
Copy the code

5. Realize text vertical typesetting

// display a single column
.wrap {
    width: 25px;
    line-height: 18px;
    height: auto;
    font-size: 12px;
    padding: 8px 5px;
    word-wrap: break-word;/* * * */  
}
// display multiple columns
.wrap {
    height: 210px;
    line-height: 30px;
    text-align: justify;
    writing-mode: vertical-lr;  // From left to right
    writing-mode: tb-lr;        //IE goes from left to right
    //writing-mode: vertical-rl; -- From right to left
    //writing-mode: tb-rl; -- From right to left
}
Copy the code

6. Invalidates the element mouse event

.wrap {
    // If you press TAB to select the element, such as button, then press Enter to execute the corresponding event, such as click.
	pointer-events: none;
    cursor: default;
}
Copy the code

7. Disable user selection

.wrap {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
Copy the code

8. Cursor attributes

.wrap {
  cursor：pointer; // Little finger;Cursor: help;// arrow with question mark;Cursor: wait;// go around;Cursor: move;// Move cursor;Cursor: the crosshair;// Cross cursor
}

Copy the code

9. Use hardware acceleration

.wrap {
    transform: translateZ(0);
}
Copy the code

10. Image width adaptive

img {max-width: 100%}
Copy the code

11. The Text – the transform and the Font the Variant

p {text-transform: uppercase}  // Change all letters to uppercase
p {text-transform: lowercase}  // Change all letters to lowercase letters
p {text-transform: capitalize} // Uppercase
p {font-variant: small-caps}   // Change the font to small uppercase letters
Copy the code

12. Set a container to transparent

.wrap { 
  filter:alpha(opacity=50); 
  -moz-opacity:0.5; 
  -khtml-opacity: 0.5; 
  opacity: 0.5; 
}
Copy the code

13. Remove the Transition screen

.wrap {
    -webkit-transform-style: preserve- 3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
Copy the code

14. Custom scroll bar

overflow-y: scroll; -webkit-scrollbar {width: 5px; } -webkit-scrollbar-track {background-color: #ffa336; border-radius: 5px; } -webkit-scrollbar-thumb {background-color: #ffc076; border-radius: 5px; }Copy the code

15. Let HTML recognize ‘\n’ in string and wrap

body {
  	white-space: pre-line;
}
Copy the code

16. Implement a triangle

.wrap { 
  border-color: transparent transparent green transparent; 
  border-style: solid; 
  border-width: 0px 300px 300px 300px; 
  height: 0px; 
  width: 0px; 
}
Copy the code

17. Removes the border that is clicked

a {outline: none}
a {outline: 0}
Copy the code

18. Use CSS to display the URL after the link

a:after{content:"(" attr(href) ")"; }Copy the code

19. Select content is displayed in the center and content is aligned to the right

select{
    text-align: center;
    text-align-last: center;
}
select option {
    direction: rtl;
}
Copy the code

20. Changing the color of the cursor in the input field does not change the color of the font

input{
    color:  #fff;
    caret-color: red;
}
Copy the code

21. Modify the placeholder default font style in the input box

// input::-webkit-input-placeholder {color: #c2c6ce; } // input:-moz-placeholder {color: # c2C6CE; } //Firefox version 19+ input::-moz-placeholder {color: # c2C6CE; } {color: #c2c6ce; color: #c2c6ce; }Copy the code

22. Child element fixed width Parent element width spread

// The children of the parent are inline elements
.wrap {
  white-space: nowrap;
}
// If the child of the parent element is a block-level element
.wrap {
  white-space: nowrap;  // Child elements are not wrapped
  display: inline-block;
}
Copy the code

23. Center the image and text in div at the same time

.wrap {
  height: 100,
  line-height: 100} img {vertival-align: middle}// vertical-align The vertical-align attribute of the CSS is used to specify the vertical alignment of inline elements or table-cell elements. It only works on inline elements, table cell elements, and cannot be used to align block elements vertically
/ / vertical - align: baseline/top/middle/bottom/sub/text - top;
Copy the code

24. Realize the width and height proportional adaptive rectangle

.scale { width: 100%; Padding - bottom: 56.25%; height: 0; position: relative; } .item { position: absolute; width: 100%; height: 100%; background-color: 499e56; } <div class="scale"> <div class="item"> Here is the container for all child elements </div> </div>Copy the code

25. The rotate property of transfrom is invalid under the SPAN tag

span {
  display: inline-block
}
Copy the code

26. The border font is the same color

.wrap { width: 200px; height: 200px; color: #000; font-size: 30px; border: 50px solid currentColor; // border: 50px solid; // implement two}Copy the code

The last

GitHub if there are omissions, please correct!!

If feel helpful to you! Please don’t forget to like or follow! Your attention will be my motivation to move forward! Rush duck!!

“Fearless front end” updates the community excellent technical articles from time to time!